Div fixada, e andando junto à rolagem

[Vinicius Eduardo_52741 1]

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?

[Hatsuya 0]

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

[Dian Carlos 29]

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.

[Hatsuya 0]

@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

[Dian Carlos 29]

@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.

[Hatsuya 0]

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

[Gerciley 14]

o position: fixed não funciona mais?

[Hatsuya 0]

@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...