0

我必须保持“主页”部分的导航背景透明。但是当视口在选择其他部分时发生变化。导航的背景颜色变为永久黑色。

  <header class="clearfix">
    <nav>
    <a href="#fbsection1">HOME</a>
    <a href="#fbsection2">ABOUT US</a>
    <a href="#fbsection3">EVENTS</a>
    <a href="#fbsection4">CONTACT US</a>
    </nav>
  </header>

这是小提琴

4

1 回答 1

0

据我了解，您希望标题背景根据用户所在网站的哪个部分进行更改，对吗？

查看 jQuery Waypoints 插件——它允许您根据滚动位置为元素动态设置类。在这里看到它：http: //imakewebthings.com/jquery-waypoints/#about

或者，如果您想要纯 CSS 解决方案，请查看以下代码笔：

http://cdpn.io/KftAm

您基本上使用单独的元素作为背景并使用 z-index 正确分层这些东西。所以你有一个 z-index 为 1 的黑色背景元素，z-index 为 2 的图像，然后是 z-index 为 3 的导航。

然后需要将图像设置为position:relative;

这样做的问题是，您必须小心将背景元素的大小设置为与导航相同的大小。

您只需要在顶部图像上设置：

img {
    position:relative;
    z-index:999;
}

对于实际背景：

.nav-bg {
    /* position and height the same as your fixed nav */
    position:fixed;
    z-index:998;
    background:#000;
}
于 2013-07-17T14:32:05.890 回答