How to make div follow scrolling smoothly with jQuery?

Posted by Martti Laine on Stack Overflow See other posts from Stack Overflow or by Martti Laine
Published on 2010-02-01T15:55:07Z Indexed on 2010/12/27 18:53 UTC
Read the original article Hit count: 182

Filed under:
|
|
|

Hello

I'm creating a blog layout, which has an sidebar. In sidebar there are sections/boxes, but the last one of these boxes should follow scrolling when none of the other boxes are visible.

So, when user scrolls down, he sees a normal sidebar, but when user has went down enough, sidebar ends but the last box starts to follow on the top of the screen. I have seen this a lot on different kind of sites.

So hard to explain with my english. I already made it to follow screen smoothly with animate() but couldn't get it like this. Hope you understood.

I already tried in Google for almost an hour but couldn't figure out any keywords (due to my bad english).

EDIT: My code at the moment:

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about scroll