Como fixar a barra de navegação do Bootstrap quando a barra de rolagem chegar nela? Essa funcionalidade é chamada de Sticky Navbar.
Utilizando esse código JavaScript abaixo a barra de navegação estática (com a classe .navbar-static-top) passa a ficar fixada no topo da página (classe .navbar-fixed-top) quando a barra de rolagem atinge certa parte da página.
var num = $('.navbar').offset().top; $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('.navbar').addClass('navbar-fixed-top'); $('.navbar').removeClass('navbar-static-top'); } else { $('.navbar').addClass('navbar-static-top'); $('.navbar').removeClass('navbar-fixed-top'); } });
A variável num contém a quantidade de pixels do topo até onde a barra de rolagem vai atuar para modificar o estilo da navbar. Neste caso estou utilizando o método offset() do jQuery para verificar a altura da barra de navegação automaticamente.
As classes de navbar descritas acima são originalmente do Bootstrap (testado com o Bootstrap 3.3.2), mas com algumas adaptações pode ser utilizado em qualquer outro CSS, basta alterar os nomes das classes no código.
Esse código foi encontrado nesse JSFiddle e apenas alterei para a utilização do método offset().