Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!, tenho uma div que ocupa todo o lado direito da tela >> e eu quero que quando fosse abaixada a página ela ficasse lá e que ela não subisse, quero que ela fique fixada, como faço isso?
Você pode usar a função bind do jQuery:
Ex:
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) { /* quando a página descer 100 pixels */
$('div#suadiv').css({ /* a sua div */
position: 'fixed',
top: '73px' /* vai ficar fixa a 73 pixels do topo */
});
} else {
$('div#suadiv').css({
position: 'relative',
top: '0px'
});
}
});
Boa sorte ai man.
@Dian
Haha, não sei por que, mas odeio javascript :/, veja só, de css eu entendo um pouco.
Css não é que nem javascript, que você define um valor, e ele atribui o valor, e depois retorna a ser zero.
"quando a página descer 100 pixels" , depois de descer 100 pixels, voltará a ser 0. e descerá mais 100 e assim por diante, em css não acontece dessas.
Acredito que você desce um pouco a página, o menu desce, mas depois fica. Se estou correto, então, você pode mudar de pixels para 'em', se eu não me engando 1 em = 12px. Mantém certa proporção, não é um valor fixo, no else, não precisa definir nada, ja que se for ao contrario nada acontece mesmo.
E além de tudo, o lugar a ser colocado no html faz diferença também, pode facilitar, dificultar ou até inviabilizar
@Hatsuya, não entendi seu raciocínio, mas, se você observar o meu código ali esta quando a rolagem da página for maior que 100 ($(this).scrollTop() > 100), ou seja, quando a página for rolada 100px do topo ou mais a "div" ficará fixada, se for menor que isso o css volta ao normal. E me expressei mal, o comentário correto seria "quando a página descer mais de 100 pixels do topo".
Um exemplo desse código em funcionamento pode ser vista aqui: http://www.ervattiimobiliaria.com.br/. Role a página e veja o que acontece.
Ah, ok... cara , que eu tenha visto, verifica se ele está dentro de um container. e coloque os pontos e virgulas na parte do CSS
o position: fixed não funciona mais?
@Gerciley acho que o css do javascript está com alguns erros, por isso não está funcionando. Faltando " ; " e está com aspas
@Dian meu raciocinio era que seu menu estava no topo da página e desce-se junto, mas parece está um pouco abaixo de acordo com o exemplo dado...
Você poderia postar seu código? então cara, geralmente uso background-attachment: fixed; ou position: fixed; , mas era melhor você postar o código daí a gente poderia te dizer melhor o que funciona