Question

parallax.js将做的是为文档开头处的每个视差图像创建一个固定位置元素。该镜子元素将位于其他元素的后面，并匹配其目标对象的位置和尺寸。

我已为导航添加了此标记：

<nav class="nav-inner" role="navigation">

    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>

</nav>

和这个CSS：

.nav-inner {
  position:fixed;
  top:0;
  left:0;
  z-index:500;
 }

问题在于，当我向下滚动时，导航不会像我预期的那样固定在页面顶部。

这是一个jsbin来看看会发生什么。

有关如何使导航栏保持固定的任何建议？

Answer 1

只需为所有z-index:0元素设置parallax-mirror

.parallax-mirror {z-index:0 !important;}

或者直接在元素样式属性中更改属性，因为它具有z-index:-100

Answer 2

我通常以不同方式制作固定导航栏。这是我的代码。它对我有用：

CSS：

#navBar
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    color:#000;
    background-color:#fff;
    padding-left:2em;
    opacity:.9;
    z-index:100;
}

#navBar > a (however you reference your child elements)
{
margin:-4px;
}

HTML：

<div id="navBar"><a href="">anywhere</a><a href="">anywhere</a></div>

如果这不起作用，请告诉我，我会看看我的答案。

Answer 3

由于你已经使用了jQuery，你可以在这里找到jQuery插件：http://www.jqueryrain.com/demo/jquery-fixed-header/

固定位置导航栏不起作用

3 个答案: