How to hover a Fixed element until it reaches some point

Question

I've got a div which I need to be fixed to the bottom of the screen, until it reaches some point after scrolling and stop there and stay. If a user start scrolling back up - make it fixed again after passing that same point.

Any ideas on how this can be accomplished?

EDIT: (here's my current code which doesn't work)

$(window).scroll(function () {
    if ($(this).scrollTop() < $(document).height() - 81) {
        $('#bottom_pic').css('bottom', "0px");
    }
    else {
        $('#bottom_pic').css('bottom', "81px");
    }
});

CSS:

#bottom_pic 
{
    position: fixed;
    bottom: 0px;
}

Thanks!

Answer 1

jQuery Waypoints is an excellent plugin to achieve things like this: Demo of fixed div after scrolling