Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17586
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Fixar a posição da div no topo quando a tela rolar jQuery

25-04-2015 22:01

Nesse post mostro como manter a posição da div em uma posição fixa assim que a tela for rolada.

Funciona da seguinte forma:

A div vai ficar em uma posição qualquer da tela longe do topo. Assim que a tela for rolada para baixo e chegar ao ponto que a div for desaparecer ela trava, e fixa fixa.

Assim que a tela for rolada para cima e a div chega ao ponto que estava ela solta e volta para a posição que estava.

<script src="jquery.js"></script> <script> $(document).ready(function() { // PARA PREENCHER O VALOR DE ALTURA ABAIXO, DESCOMENTE A LINHA DO ALERT. //alert( $('.caixa').offset().top ); var altura = 236; $(window).scroll(function() { if ($(window).scrollTop() > altura) { $(".caixa").css({"position": "fixed", "top": "0px"}); } else { $(".caixa" ).css({"position": "relative", "top": "0"}); } }); }); </script> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div class="caixa" style="border:1px solid #ccc; width:100%;">CONTEÚDO</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

3
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado