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.
d3ut3r
5.03.2012, 06:15:37
@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?
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ś.
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.
Nawet nie zadałeś sobie trudu aby sprawdzić kod który podałem.
http://jsfiddle.net/xHQyK/show/
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!
Taedh
23.04.2012, 19:33:10
Witam serdecznie,
Bardzo proszę o informację jak zaimplementować ten kod na stronę, próbuje już od paru godzin i mi nie wychodzi
Tak samo jak inne kody. Polecam kurs html i przejrzenie źródła.
http://jsfiddle.net/xHQyK/show/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.