• Faixa fixa que aparece ao descer a página
Bom, resolvi postar o tutorial. Ele é bem simples, só precisam entender algumas coisas. Esse tutorial foi bastante pedido, eu fiquei relutante em postá-lo aqui, mas vi que não era lá essas coisas de não ter um motivo tão grande para não fazer isso. Então vamos lá.
Entre no tthy para poder ver o tutorial corretamente sem divs sumidas.
Você vai precisar por esse js antes de </head> seja no wp/tumblr/blogger
<script> $(window).scroll(function() { if ($(this).scrollTop()>200) { $('.menufixo').fadeIn(); } else { $('.menufixo').fadeOut(); } }); </script>
if ($(this).scrollTop()>200) >> essa linha significa o valor em que a faixa vai aparecer ao rolar a página, ou seja eu desço a página 200px e a faixa vai aparecer no topo. O valor poderia ser maior. Geralmente usa-se o valor quando o menu principal termina. Eu tenho meu topo, ele tem 400px e o menu fica depois dele, o menu tem 100px de height somando 500px (com espaçamento) então eu informo nessa linha o valor certo e quando o menu passar do valor informado a faixa irá aparecer.
Como pode notar, ainda no código informamos a div que queremos com o efeito, é a .menufixo então devemos criar essa div e fazer ela ficar fixa no topo e ter a forma que gostarÃamos.
.menufixo { height: 55px; width: 100%; z-index: 100000; background: #fff; display: none; position: fixed;}
Formate a faixa da forma que você desejar, colocando cores etc. Agora vamos a parte do html, depois de <body> você deve por a div.
<div class="menufixo"> conteudo </div>
Dúvidas:
Eu coloquei a faixa, mas o conteúdo dentro dela não fica centralizado, o que faço?
Você vai precisar colocar a div de todo conteúdo dentro da faixa, aquela div onde a sidebar e a parte da postagem ficam, sabe? O nome da minha div é #container (a sua pode ser content, conteudo) então eu vou precisar adicionar ela dentro da div do menufixo.
Dai fica:
<div class="menufixo"> <div id="container"> conteudo </div> </div>
Bom, depois disso você põe menu, alguma informação ou o que você quiser.
Qualquer dúvida em questão, mande-nos uma ask.
