Venho apresentar uma técnica bem interessante e nova, utilizada até pelo Facebook, Google+ etc. Se trata de um menu (ou qualquer outro elemento) que aparece apenas quando o usuário chegar em determinada parte da página. Ou seja, quando você rola a barra de rolagem, em um determinado momento aparece o menu . Veja uma demonstração aqui mesmo no nosso blog, suba até o início e desça devagar pra ver o que acontece.
Não pretendo ensinar sobre as linguagens então recomendo que pelo menos de CSS você entenda um pouco. O hack pode parecer difícil, mas é bem tranquilo, siga os passos.
No meu caso, trabalharei com o menu de páginas tradicional do blogger, mas pode ser aplicado pra qualquer outro elemento.
1 - Saiba do código HTML/ Class e ID
Lembre-se que é preciso um código HTML para criar o elemento. No nosso exemplo ele já está pronto (pelo blogger). É importante que você adicione um ID ou uma Class única. Se deseja descobrir a class, id ou referencia para algum elemento que não conhece o código, clique com o botão direito de onde deseja saber, depois clique em "Inspecionar elemento". E veja no código como pode fazer o caminho de referencia.
2 - Criar classe CSS (estilo)
Para que o menu se comporte de outra maneira, temos que adicionar um estilo secundário a ele. Então, criamos uma classe que será adicionada ao elemento por jQuery. Às vezes (como no meu caso) pode ser necessário adicionar uma classe pai antes para especificar melhor, por exemplo : ".tabs-inner .fixo".
Segue o código, ajuste-o conforme o necessário.
Agora precisamos fazer que o menu realmente apareça quando descermos a página. Para isso, precisamos incluir a biblioteca jQuery do JavaScript no blog. Procure por <head> e logo APÓS cole:
E está pronto! Essa é uma técnica bem avançada e pode ser complicada pra algumas pessoas, então se tiver algum problema ou erro me comunique por aqui que farei o máximo pra te ajudar!
É isso aí, espero que tenham gostado! Compartilhe o blog e nos siga nas redes sociais, ajude-nos!
Não pretendo ensinar sobre as linguagens então recomendo que pelo menos de CSS você entenda um pouco. O hack pode parecer difícil, mas é bem tranquilo, siga os passos.
No meu caso, trabalharei com o menu de páginas tradicional do blogger, mas pode ser aplicado pra qualquer outro elemento.
1 - Saiba do código HTML/ Class e ID
Lembre-se que é preciso um código HTML para criar o elemento. No nosso exemplo ele já está pronto (pelo blogger). É importante que você adicione um ID ou uma Class única. Se deseja descobrir a class, id ou referencia para algum elemento que não conhece o código, clique com o botão direito de onde deseja saber, depois clique em "Inspecionar elemento". E veja no código como pode fazer o caminho de referencia.
2 - Criar classe CSS (estilo)
Para que o menu se comporte de outra maneira, temos que adicionar um estilo secundário a ele. Então, criamos uma classe que será adicionada ao elemento por jQuery. Às vezes (como no meu caso) pode ser necessário adicionar uma classe pai antes para especificar melhor, por exemplo : ".tabs-inner .fixo".
Segue o código, ajuste-o conforme o necessário.
.tabs-inner .fixo{3 - Fazer funcionar ( jQuery)
position:fixed;
top:0;
left: 0;
opacity:0.8;
z-index:999;
}
.tabs-inner .fixo:hover{
opacity:1;
}
Agora precisamos fazer que o menu realmente apareça quando descermos a página. Para isso, precisamos incluir a biblioteca jQuery do JavaScript no blog. Procure por <head> e logo APÓS cole:
<script src='http://code.jquery.com/jquery-latest.js'/>Feito isso, pule uma linha e cole o script principal:
<script type='text/javascript'>O que está em azul deve ser a referência ao elemento. O que está em vermelho é a altura em pixels de onde se deve aparecer o menu. O que está em verde é a classe secundária que faz com que deixe o menu fixo.
$(document).ready(function() {
var nav = $('#PageList1 ul');
$(window).scroll(function () {
if ($(this).scrollTop() > 320) {
nav.addClass("fixo");
} else {
nav.removeClass("fixo");
}
});
});
</script>
E está pronto! Essa é uma técnica bem avançada e pode ser complicada pra algumas pessoas, então se tiver algum problema ou erro me comunique por aqui que farei o máximo pra te ajudar!
É isso aí, espero que tenham gostado! Compartilhe o blog e nos siga nas redes sociais, ajude-nos!
Quando aplico o código a barra de rolagem some. Sabe o porque?
ResponderExcluirOlá Henrique, isso é estranho. Pode ser meio ridículo, mas garanta que depois que você aplica o código a altura da página seja suficiente para criar um scroll. Se não,deve ser algo não relacionado apenas com esse código em si, mas deve estar tendo conflito com outro. Qualquer coisa, poste aqui seu site que eu dou uma olhada. Valeu!
ExcluirOlá Giovanni,
ExcluirAgradeço por responder. Consegui resolver o problema.
Na realidade, não era um conflito entre códigos do próprio blog, e sim com o navegador. Eu havia aplicado uma personalização na barra de rolagem do Chrome através de algumas alterações em seus arquivos, e quando removi tais códigos tudo funcionou perfeitamente. Pode conferir em: http://henriquezenny.blogspot.com.br/
Abraços!
Que bom que conseguiu Henrique! Realmente esses códigos do -webkit para scroll são bens enjoados de se trabalhar. Aliás, parabéns pelo blog! Achei muito interessante, se quiser, estou disposto a troca de banners.
ExcluirAbraços!
É claro, já enviei o email!
Excluir