Make Scrolling NavBar Stick At Top Of Browser In Bootstrap

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

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>

Answer 2

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

我相信这就是你要找的： http : //www.w3schools.com/bootstrap/bootstrap_affix.asp

Answer 5

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;
}