Make DIVs fixed automatically

by Alexander Tartmin

HTML

<div id="d1" class="auto-fixed"></div>
<div id="d2" class="auto-fixed"></div>
<div id="d3" class="auto-fixed"></div>
<div id="d4" class="auto-fixed"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra fringilla dolor, nec porta tortor mattis vel. Aenean posuere nisl in mi facilisis adipiscing. Nulla tortor lectus, viverra et hendrerit vitae, tempor a ipsum. Morbi id imperdiet urna. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sodales dictum magna at lobortis. Etiam at felis at tortor pulvinar elementum. Duis auctor justo nec tortor faucibus ut pretium arcu tempor. Sed eleifend lorem et felis dignissim consequat. Vivamus convallis nisi in mi venenatis volutpat.

Nullam nec metus enim, in lacinia risus. Nulla vehicula fringilla risus vitae auctor. Donec tempor, dui non viverra tincidunt, lacus turpis venenatis diam, vel commodo quam eros a purus. Integer metus lacus, pellentesque nec consequat eu, suscipit fermentum purus. Etiam non nibh at enim semper malesuada. Praesent ut dapibus felis. Sed odio urna, rutrum vitae condimentum ac, consectetur eu diam. Nunc vulputate velit ut nisi fermentum eu imperdiet magna scelerisque. Etiam accumsan vulputate odio, id euismod lectus scelerisque id. Praesent rhoncus, mi eu consequat pulvinar, mauris augue commodo tortor, et condimentum mauris purus et tortor. Nam ut elit ut nisi consectetur convallis eget sit amet erat.

Sed semper orci in lacus sodales dictum. Aenean ut elit sit amet elit porta adipiscing. Vivamus vulputate luctus hendrerit. In sed mauris vel nibh mattis accumsan. Fusce leo ligula, mattis sed rutrum non, tristique nec neque. Fusce sagittis tempor felis, ut malesuada purus varius sed. Duis consequat, libero id placerat volutpat, odio elit fermentum lectus, at accumsan lectus neque in lacus. Ut mauris enim, egestas quis mattis non, vestibulum id nisl. Ut nisi lectus, rutrum vitae adipiscing eget,...

CSS

.auto-fixed{
    width:100px;
    height:100px;
    position:absolute;
}

#d1{
    background:#f00;
    top:50px;
}
#d2{
    background:#0f0;
    top:200px;
}
#d3{
    background:#00f;
    top:400px;
}
#d4{
    background:#088;
    top:600px;
}

#content{
    float:left;
    width:50%;
    height:800px;
    background:#fee;
}

JavaScript

(function(){
    var divs = $('.auto-fixed');

    function CachePositions(){
        divs.each(function(){
            if ($(this).css('position')!='fixed')
                $(this).data({initialTop:$(this).position().top});
        });
    }

    var scrollable = $(window);
    scrollable.scroll(function(){
        divs.each(function(){
            var top = $(this).data('initialTop');
            if(top<scrollable.scrollTop()){
                $(this).css({position:'fixed',top:0});
            } else {
                $(this).css({position:'absolute',top:top+'px'});
            }
        })
    });

    var resizeTimeout;
    $(window).resize(function(){
        if (resizeTimeout)
            clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function(){
            resizeTimeout = null;
            CachePositions();
        },100);
    });
    
    CachePositions();
})();