Efeito Menu Bootstrap

Front-end
#1

http://recodejr.com/

como deixar igual a esse site

quando descer a página, o menu fica fixo

1 curtida
#2

Você precisa controlar quando o seu menu chega ao topo da janela e nesse momento mudar a posição do menu para fixo.

Assim $(’#meuMenu’).offset().top vai dar-lhe a distancia ao topo.

Quando a distancia for <= ao valor do scroll da página, então você pode adicionar uma classe CSS que força a posição fixa:

.fixar {
    position:fixed;
    margin-top: 0px !important;
}

Assim o javascript/jquery pode ser:

var offset = $('#meuMenu').offset().top;
var $meuMenu = $('#meuMenu'); // guardar o elemento na memoria para melhorar performance
$(document).on('scroll', function () {
    if (offset <= $(window).scrollTop()) {
        $meuMenu.addClass('fixar');
    } else {
        $meuMenu.removeClass('fixar');
    }
});

Teste:
http://jsfiddle.net/WYDhk/1/

1 curtida
#3

Vou deixar uma sugestão, que vi no site W3C School e achei interessante, como alternativa a do @Mike.

Dentre as posições existentes, para o atributo position, existe uma chamada sticky.

nav{
    position: -webkit-sticky;
    position: sticky;
   //Outro comandos CSS
}

Você pode ver uma amostra aqui.

1 curtida
#4

Eu não fiz o teste aqui, mas aparentemente o position: sticky deixa o componente fixo no top assim que ele chega ao topo na hora da rolagem da página, se for isso o método da @vanribeiro é bem mais prático :slight_smile:

1 curtida