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 = $('#nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#nav').css({ 'position': 'fixed', 'top':0, width:'inherit', });
} else {
$('#nav').css({ 'position': 'relative', });
}
};
// 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:
- O código deve ser aplicado ante de </head>
- 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.
- 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.
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! ^^