Loading
carregando...

Div com fade ao rolar a página em jQuery


Olá pessoal estava fazendo um toor pelo forum.imasters e vi um amigo pedindo ajuda de como desenvolver uma função em que quando rolar a página até um certo lugar, uma certa DIV (no caso dele citava um menu) iria sumir com um efeito de fade, então resolvi criar uma função que podesse fazer essa ação.

Como é em jQuery precisamos chamar a biblioteca jQuery para que a função funcione corretamente, para isso como já cvitei em outros posts aqui mesmo no Darc Web, para quem não tem a biblioteca jQuery, nos posts, utilizo a biblioteca do Google que está disponível no seguinte link:

  1.  
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  3.  



depois de chamar a biblioteca jQuery vamos a função que irá executar as ações:

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


Depois de feito isso agora vc só precisa definir uma id para a div principal da aplicação que irá receber as ações, :

  1.  
  2. <div id="menTop"></div>
    
  3.  


Clique aqui para ver a função funcionando!

é isso qualquer dúvida postem comentários... tt


Autor: Dárcio Gomes
Data: 04/11/2012 00:00:00