Question

我必须让“home”部分的导航背景保持透明。但是当视口改变其他部分的选择时。导航的背景颜色获得永久黑色。

  <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解决方案，请查看以下codepen：

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

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

1 个答案: