sobota, 10 listopada 2012

Sticky Box

Sticky box podobnie jak element z position : fixed jest zawsze widoczny, ale w przeciwieństwie do niego nie jest zawsze w tym samym miejscu względem okna. Kiedy strona zostaje przewinięta przylepia się do krawędzi.

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
Treść
2. Żeby skrypt poprawnie działał div musi mieć względną pozycję
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.