javascript - 更改单页网站中部分更改的导航背景

Question

我必须使“主页”部分的导航背景保持透明。但是当视口(viewport)因选择其他部分而改变时。导航的背景颜色变为永久黑色。

  <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>

这是fiddle

Answer 1

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

查看 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;
}