Barra "fixa" escondida - como fazer

[_bruninha 0]

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.

[Rogério Santana 172]

Veja se ajuda :seta: http://forum.imasters.com.br/topic/434462-barra-flutuante-igual-do-submarino-e-kalunga/

[Dian Carlos 29]

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.