Blokowanie przesuwania się diva przy przewijaniu


(stanek.94) #1

Witam! Czy da się tak wy pozycjonować diva żeby,gdy strona jest nie przewinięta w dół to był 200px od góry strony, ale przy przewijaniu w dół blokował się tak że byłby zawsze na górze strony? Gdy daję

top:200px;

position:fixed;

width:200px;

To jest zawsze 200px od góry, niewazne czy przewinięta strona czy nie, a gdy ustawię position:relative; przy przewijaniu przesuwa się z resztą strony.

Czy można to jakoś połaczyć że jest position fixed:0px i relatywnie 200px w dół od body?


(Konrad Kosowski) #2

tylko przez javascript. Polecam jquery, który w łatwy sposób przechwyci event scroll ($(‘body’).scroll(function(){ //twój kod tutaj });), do tego sprawdzenie aktualnej pozycji “od góry” ($(window).scrollTop():wink: i zmiany pozycjonowania elementu, o którym piszesz.


(kostek135) #3

http://jsbin.com/omanut/2

Tu w kodzie nawet znajdziesz przykład. Kiedyś wprowadzą position:sticky; Nie działa to wszędzie - w sumie prawie nigdzie, póki co. I będzie ono służyć temu samemu zachowaniu.

PS

Znalazłem jeszcze to

http://html5-demos.appspot.com/static/css/sticky.html

Tu możesz zobaczyć, czy twoja przeglądarka obsługuje sticky, o ile coś ci to da, bo jak mówię mój chrome na przykład, nie.