Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ewerton Batista

[Resolvido] Menu Flutuante

Recommended Posts

Olá Pessoal,

 

a algum tempo venho percebendo que o pessoal está usando um menu flutuante depois que "rola" a página apartir de um ponto, um exemplo que vi é no site do submarino, após você rolar a página até uma posição ele mostra um menu no topo pra você fazer uma busca, já vi esse recurso para menus também, é como se fosse um menu congelado ali.

 

não sei o nome da técnica pra poder dar uma pesquisada, alguem poderia me ajudar? ou se alguem tiver algum tutorial.

 

desde já agradeço!

 

abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

de uma olhada nesse tuto: http://www.darcweb.com.br/VerPost/1/32-Div_com_fade_ao_rolar_a_pagina_em_jQuery

 

no tuto ta o contrário quando rola a div some é só colocar esse código no lugar do que está no tuto:

<script type="text/javascript">
$(window).scroll(function(){ // função para pegar o movimento do scroll (barra de rolagem)
 var top = $(window).scrollTop(); // aqui você pega a posição da página
 if(top > 80){ // verifica a posição da página
    $("#menTop").stop().animate({ opacity: 1.0 }, 800); // aqui você tira o fade no menu
 }else{ 
    $("#menTop").stop().animate({ opacity: 0 }, 800); // aqui você aplica o fade no menu
 }
});
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

de uma olhada nesse tuto: http://www.darcweb.com.br/VerPost/1/32-Div_com_fade_ao_rolar_a_pagina_em_jQuery

 

no tuto ta o contrário quando rola a div some é só colocar esse código no lugar do que está no tuto:

<script type="text/javascript">
$(window).scroll(function(){ // função para pegar o movimento do scroll (barra de rolagem)
 var top = $(window).scrollTop(); // aqui você pega a posição da página
 if(top > 80){ // verifica a posição da página
    $("#menTop").stop().animate({ opacity: 1.0 }, 800); // aqui você tira o fade no menu
 }else{ 
    $("#menTop").stop().animate({ opacity: 0 }, 800); // aqui você aplica o fade no menu
 }
});
</script>

 

Muito Obrigado! era isso mesmo que precisava, você ajudou muito!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.