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

Answer 1

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 2

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 3

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

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