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ść

    Sidebar
    

Lorem ipsum dolor sit amet...

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.