Publicado em 3 de nov.

Desaparecer em certa altura da página

Galera, desculpem se a pergunta é escrota mas ...

Eu tenho um menu horizontal lá no topo da página, assim com top="0" mesmo, e fixo! Gostaria de fazer com que esse menu desaparecesse com um fade ao chegar em determinado lugar da página (y). Podem me ajudar?

Obrigadão!

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Dárcio Gomes· 4 de nov.

amigo fiz essa funçãozinha aí, aqui funcionou, veja se é isso mesmo que você precisa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu com fade</title>

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

<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: 0 }, 800); // aqui você aplica o fade no menu
}else{
$("#menTop").stop().animate({ opacity: 1.0 }, 800); // aqui você tira o fade no menu
}

});
</script>

</head>
<body style="margin:0; height:1200px;">

<div id="menTop" style="width:100%; height:50px; background:#000; position:fixed; top:0;"></div>

</body>
</html>

qualquer coisa posta aí... :thumbsup:

link da função funcionando: http://www.darcweb.com.br/arquivos/file/div_com_fade_ao_rolar_a_pagina.html