固定位置導航欄不起作用

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/