Forum PHP.pl

Witam, jak uzyskać efekt DIVa który pływa i zatrzymuje się w odpowiednim miejscu? Jako przykład proszę zobaczyć stronę www.9gag.com scrollując w dół po prawej stronie jest content który przesuwa się aż do momentu zatrzymania na belce headera.

Pozdrawiam.

Ten post edytował Gray 5.03.2012, 04:06:40

http://www.w3schools.com/cssref/pr_class_position.asp

przeczytaj o position:fixed;

@d3ut3r position fixed ustala stałe położenie DIVa względem okna przeglądarki... a efekt którego podałem przykład jest inny, ten DIV jest ustalony jak relative ale przwija się do pewnego momentu, do zatrzymania się na belce headeru...

Musisz obliczyć pozycje scrolla względem wysokości i później zmienić pozycję dla tego elementu gdy ją przekroczy.

To raczej nie to, poza tym w czym ja miał bym to zakodować? zauważ że na tej stronie którą podałem jako przykład, każdy tytuł obrazka ma tą samą właściwość, przesuwa się do pewnego momentu...

W JS a w czym. Najprościej będzie w jQuery.

W takim przypadku zna ktoś taki skrypt? o takim działaniu? albo chociaż pod jaką frazą go szukać w googlu?

http://jsfiddle.net/xHQyK/

Dzięki ale ten czerwony kwadracik w żadnym wypadku nie zachowuje się jak podany przeze mnie przykład...

A niby czym odbiega? Wszytko działa dokładnie identycznie jak przykład który podałeś.

Ten post edytował !*! 5.03.2012, 17:41:56

z tego co widzę, to ten czerwony kwadrat pojawia się na początku białego DIVa a kiedy zescrolluję niżej znika następnie pojawia się na końcu białego diva.

na 9gag.com po prawej stronie znajdują się 2 kwadratowe boxy z reklamami googla... przewijając w dół pierwszy z nich normalnie się zachowuje ale drugi łącznie z działem recommended "przykleja" się do belki headeru i scrolluje się razem z nią... do samego dołu strony.

Ten post edytował Gray 5.03.2012, 17:59:55

Aha no sorry, nie wiem co to jest ten http://jsfiddle.net, myślałem, że to co wyświetla w prawym dolnym okienku to jest prawidłowy rezultat, po tym nowym linku wydaje się być ok, dzięki!

Ten post edytował Gray 5.03.2012, 18:21:39

Witam serdecznie,

Bardzo proszę o informację jak zaimplementować ten kod na stronę, próbuje już od paru godzin i mi nie wychodzi (IMG:style_emoticons/default/sad.gif)

Tak samo jak inne kody. Polecam kurs html i przejrzenie źródła. http://jsfiddle.net/xHQyK/show/