Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Pływający DIV
Forum PHP.pl > Forum > Przedszkole
Gray
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
http://www.w3schools.com/cssref/pr_class_position.asp

przeczytaj o position:fixed;
Gray
@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.
Gray
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.
Gray
W takim przypadku zna ktoś taki skrypt? o takim działaniu? albo chociaż pod jaką frazą go szukać w googlu?
!*!
http://jsfiddle.net/xHQyK/
Gray
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ś.
Gray
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/
Gray
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
Witam serdecznie,

Bardzo proszę o informację jak zaimplementować ten kod na stronę, próbuje już od paru godzin i mi nie wychodzi sad.gif
!*!
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.