Menu ou cabeçalho "fixo" na tela após "X" pixels - Blogger

Já repararam no menu do cabeçalho do blog?! Legal né?! Como foi possível deixar o menu fixo na página até a página rolar e atingir um ponto em que o menu passa a ficar fixo no topo da tela? Simples, eu explico e acredite, nada de JQuery! Vamos ao código:

Fonte do código: www.backslash.gr

___________________________________________________

<script>
 
    $(function() {

    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $(&#39;#nav&#39;).offset().top;
   
    // our function that decides weather the navigation bar should have &quot;fixed&quot; css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
       
        // if we&#39;ve scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top &gt; sticky_navigation_offset_top) {
          $(&#39;#nav&#39;).css({ &#39;position&#39;: &#39;fixed&#39;, &#39;top&#39;:0, width:&#39;inherit&#39;, });
        } else {
          $(&#39;#nav&#39;).css({ &#39;position&#39;: &#39;relative&#39;, });
        }
    };
   
    // run our function on load
    sticky_navigation();
   
    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
    </script>

_________________________________________________

Agora vamos as explicações:

1. O código deve ser aplicado ante de </head>
2. Em vermelho: Esta é a div do seu cabeçalho ou menu. O termo pode variar de acordo com os templates, especialmente os "modificados". Cabe a você pesquisar qual a div do seu.
3. Em azul: Estas são as definições CSS do menu quando ele se tornar "fixed" no topo da tela e as definições quando ele retornar ao ponto de origem.

No meu caso tive que adicionar a definição width:'inherit' para que a largura do menu obedecesse o padrão, pois o template que uso é responsivo, por tanto se o seu template não for responsivo você pode também definir em pixels a largura do menu. Na segunda definição CSS do menu (após "else{" ) não é necessário aplicar muitas definições caso você queira deixá-lo na forma original. Basta acrescentar apenas a 'position' relative. 

Por tanto, para que o código funcione corretamente é necessário ter conhecimentos básicos de css e saber qual a div do seu menu, de resto você pode até acrescentar outras definições css de dimensão e posicionamento.

Gostaram da dica? Simples não?! Qualquer dúvida, comenta aí!  E compartilhe também! ^^

• Tweet
• Share
• Share
• Share
• Share