Fixed position navigation bar not working

Question

I'm using an parallax jquery plugin

What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of it's target object.

I've added this markup for the navigation:

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

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

</nav>

and this CSS :

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

The problem is that when I scroll down the navigation doesn't stay fixed on top of the page as I expected.

Here is a jsbin to see it what happens.

Any suggestions on how can I make that navigation bar to stay fixed ?

Answer 1

Just set z-index:0 for all your parallax-mirror elements

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

Or change the attribute directly in elements style attribute because it has z-index:-100

Answer 2

I usually make my fixed navigation bars differently. Here is my code. It works for me:

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>

If this doesn't work let me know and I'll take a look at my answer.

Answer 3

由于您已经使用jQuery，因此可以在此处找到jQuery插件： http : //www.jqueryrain.com/demo/jquery-fixed-header/