Zdaje mi się że nawet padła propozycja uzupełnienia CSS o taką możliwość, ale póki co trzeba się wspomagać JavaScript.
1. Odpowiednia struktura HTML dla celów demonstracji, tj: content, aside i wewnątrz jego div jako sticky box
2. Żeby skrypt poprawnie działał div musi mieć względną pozycjęTreść
div { background-color : #ccc; height : 100px; position : relative; width : 100px; }3. Pozostałe style są tylko po to, żeby uwidocznić efekt
body { display : table; } section { background-color : #eee; display : table-cell; height : 1000px; width : 640px; } aside { background-color : #ddd; display : table-cell; padding-top : 200px; width : 320px; }4. Tworzymy referencję do elementu i pobieramy jego odległość od góry strony
var div = document.getElementsByTagName( 'div' )[ 0 ], offset = div.offsetTop;5. Po przesunięciu paska pobierana jest odległość między górną krawędzią widoku, a początkiem strony
window.onscroll = function() { var scroll = window.scrollY;6. Jeśli odległość okna jest równa większa niż elementu to jest ustawiany inline style dla top
if( scroll > offset ) { div.style.top = ( scroll - offset ) + 'px'; }7. W przeciwnym razie porównywana jest aktualna i startowa odległość elementu, jeśli nie są równe to resetowany jest top. Pozwala to uniknąć niedokładności wynikających z skoków podczas przesuwania
else if( div.offsetTop !== offset ) { div.style.top = 0; } };Solucja działa we wszystkich popularnych przeglądarkach.
Zobacz efekt na jsFiddle.
Brak komentarzy:
Prześlij komentarz