固定位置导航栏不起作用

Question

我正在使用视差jQuery插件

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

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

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