Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde,
Estou procurando como fazer uma barra "fixa" igual está que tem nos sites do submario.com.br e saraiva.com.br que só aparece depois que você dá um scroll na página e que depois se você voltar para o topo do site ela some.
Alguém poderia me ajudar.
1º você deve montar a barra, do jeito que você quer que ela fique. Defina o position como fixed e top 0px;
2º Oculte ela com display: none;3º Adicione a biblioteca jQuery em seu documento e use uma função para capturar o rolar do mouse, tem uma logo abaixo:
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 150) {// Se a página subir 150px
$('#suadiv').fadeIn();
} else {
$('#suadiv').fadeOut();
}
});Ou seja, quando você rolar a página e ela subir 150px a div vai aparecer, quando for menor que 150 a div é oculta.
Esse é o esquema, com isso é personalizar do seu jeito. Você pode fazer qualquer coisa com o rolar do mouse. A uns dias atras fiz um 'Subir ao topo' com esse código + uma função para rolar a página com easing.
Veja se ajuda :seta: http://forum.imasters.com.br/topic/434462-barra-flutuante-igual-do-submarino-e-kalunga/