Make Scrolling NavBar Stick At Top Of Browser In B

Question

I'm new to Twitter Bootstrap and want to have a NavBar at the bottom of a deep'ish MastHead and when the user vertically scrolls the page and the NavBar gets to the top of the page, change the style to so that the NavBar becomes Fixed. The effect I want is the same as http://www.happycog.com/ only using the Bootstrap NavBar.

So, the real question is how to trigger the navbar-fixed-top style when the NavBar is scrolled to position 0 ie: the top of the browser.

Any ideas or pointers would be appreciated. Thank you.

Answer 1

I believe this is what you are looking for: http://www.w3schools.com/bootstrap/bootstrap_affix.asp

Answer 2

In aiming for browser compatibility, the following might be of more use.

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 10px;
  z-index: 100;
}

Answer 3

You can try CSS3 sticky position:

.sticky {
  position: sticky;
  top: 10px; /* When the element reaches top: 10px, it becomes fixed. */
  z-index: 100;
}

Browser support: http://caniuse.com/#feat=css-sticky

Answer 4

You'll have to use javascript to do this. Here's a solution that relies on jQuery to convert the navbar positioning to fixed once it gets to the top of the page as well as stick a temporary div in its place to prevent the layout from changing.

http://jsfiddle.net/T6nZe/

Answer 5

The CSS class navbar-fixed-top is what you want to add.

Here's an example:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
    <!-- nav content -->
</nav>