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! ^^
muito bom :>)
ResponderExcluirIntaum amigo! Qualquer coisa estamos por aqui! :)
ExcluirBom mesmo.. queria saber como deixar todo o cabeçalho fixo no blogger, como dessa página http://blog.obravip.com
ResponderExcluirÉ mais fácil ainda e você nem precisa do código da postagem, basta determinar na div do cabeçalho: 'position: "fixed"; "top";'
ExcluirQualquer dúvida no código html estamos por aqui (o)
Ei cara como posso colocar entao um player de áudio de modo que este fique fixo e não pare de tocar durante a navegação nas outras paginas?
ResponderExcluirMEU NOME É LEOMAR, apesar desse perfil
Infelizmente isso não é possível na plataforma blogger [-(
ExcluirOlá, Muito obrigado mesmo, seu post é de ótima qualidade, porém quando eu apliquei no meu blog o menu ficou em baixo das outras partes do template, como eu altero isso? :-?
ResponderExcluirOlá amigo, me parece que lhe falta o atributo "z-index". Experimente adicioná-lo. Neste link tem umas orientações básicas: http://www.guiadophp.yoonix.com.br/2010/05/14/posicionamento-com-z-index-em-css/
ExcluirPara mais dúvidas não canse de consultar o google, e também estou a disposição através dos comentários, abraços.
valeu deu certo também a gente usa o mesmo tema
ResponderExcluirsó que no meu eu caprichei traduzi tuto até as datas
visita ai ok
precisa to ai
http://josenamastelopes.blogspot.com.br/
Que legal parceiro, parabéns pelo blog. Abraços.
Excluirjose como vc colocou os numeros nao deu certo pra mim nao
Excluirmuito bom cara vlw (h) , veja como ficou o meu www.androiddownload.com.br
ResponderExcluirMuito top cara! Seu site tá igualzinho ao baixaki/techmundo/etc. :>) Abraços.
ExcluirProcura pela div do cabeçalho e substitua o 'position' que estiver por "fixed"...
ResponderExcluir