How to make div follow scrolling smoothly with jQuery?

Question

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);
    });
});

Answer 1

I figured it out:

var el = $('.follow-scroll');
var elpos_original = el.offset().top;
$(window).scroll(function(){
    var elpos = el.offset().top;
    var windowpos = $(window).scrollTop();
    var finaldestination = windowpos;
    if(windowpos<elpos_original) {
        finaldestination = elpos_original;
        el.stop().css({'top':10});
    } else {
        el.stop().animate({'top':finaldestination-elpos_original+10},500);
    }
});

Answer 2

There's a fantastic jQuery tutorial for this at http://jqueryfordesigners.com/fixed-floating-elements/.

It replicates the Apple.com shopping cart type of sidebar scrolling. The Google query that might have served you well is "fixed floating sidebar".