Twitter bootstrap fix navigation after scrolling

Question

I have a nav-bar that starts at about 200 pixels at the top of the page when loading. When I scroll down, I would like the nav-bar to “snap” to the very top of the page and be visible when I view the rest of the content. I can make nav-bar stay in place, although 200px is on top, and it ignores the content I pulled out and pulls it all to the left. I have to make sure that the navigation bar remains visible and that the layout / style is the same all the way.

below is my jsfiddle which shows that i have problems with

<!-- Begin Logo / Search --> <header class="masthead"> <div class="row"> <div class="span6"> <div class="logo pull-left"> <h1><a href="/">name</a></h1> </div> </div> <div class="span6"> <div class="pull-right hidden-phone"> <form class="search" action="/search" id="site-search"> <input type="hidden" name="records" value="6"> <div class="input-append"> <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" /> <button class="btn" type="submit"><i class="icon-search"></i></button> </div> </form> </div> </div> </div> </header> <!-- Begin Navbar --> <div> <div class="navbar navbar-static"> <div class="navbar-inner" id="mastnav"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav"><li><a href="#">nav</a> </li></ul> <ul class="nav pull-right"> <li> <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a> </li> </ul> </div> </div> </div> </div><!-- /.navbar --> </div> 

JSFIDDLE

Answer 1

Once nav becomes affix , it no longer follows normal CSS navigation styles. You can specify the identifier of the external DIV container, and then set it as the `affix 'element. Use CSS to make sure it stays 100% wide.

 #nav.affix { position: fixed; top: 0; width: 100% } 

Working demo

Answer 2

Here is a modified jsfiddle that does what you want:

Update: Sorry! inserted the wrong jsfiddle! Realized when I sow a negative voice! I will do it again and refresh the moment

Update: here is:

http://jsfiddle.net/KUPbD/4/

As an additional note, you can declare an affix in html using data-spy="affix" and data-offset-top="" , so there is no need for an additional built-in script

Answer 3

 <script type="text/javascript"> $(document).ready(function(e) { $(window).scroll(function () { if ($(window).scrollTop() > $('.navbar').offset().top) { $('.navbar').addClass('navbar-fixed-top'); $('.navbar').removeClass('navbar-static-top'); } else { $('.navbar').removeClass('navbar-fixed-top'); $('.navbar').addClass('navbar-static-top'); } }); }); </script> 

Answer 4

You need to attach the affix to the external container of the navigator, I made some changes to it ...

No changes to this Js, but html structure: -

 $('#mastnav').affix({ offset: { top: 0 } }); 

Demo: - http://jsfiddle.net/KUPbD/1/