Hacer scroll NavBar Stick en la parte superior del navegador En Bootstrap

Question

Soy nuevo en Twitter Bootstrap y quiero tener una NavBar en la parte inferior de un MastHead profundo y cuando el usuario se desplaza verticalmente por la página y la NavBar llega a la cima de la página, cambie el estilo para que la barra Nav se vuelva fija. El efecto que deseo es el mismo que http://www.happycog.com/ solo con Bootstrap NavBar.

Por lo tanto, la verdadera pregunta es cómo activar el estilo de la barra fija fija cuando el NavBar se desplaza a la posición 0, es decir, la parte superior del navegador.

Cualquier idea o sugerencia sería apreciada. Gracias.

Answer 1

Tendrás que usar javascript para hacerlo. Aquí hay una solución que se basa en jQuery para convertir el posicionamiento de la barra de navegación en fijo una vez que llega a la parte superior de la página, así como colocar un div temporal en su lugar para evitar que el diseño cambie.

http://jsfiddle.net/T6nZe/

Answer 2

Usted puede tratar de CSS3 posición pegajosa:

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

apoyo del navegador: http://caniuse.com/#feat=css-sticky

Answer 3

En el objetivo de la compatibilidad del navegador, lo siguiente podría ser de mayor utilidad.

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

Answer 4

La clase CSS navbar-fixed-top es lo que desea agregar.

He aquí un ejemplo:

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

Answer 5

Creo que esto es lo que busca: http://www.w3schools.com/bootstrap/bootstrap_affix.asp