How to hover a Fixed element until it reaches some point

css, css-position, jquery

Solution

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

Problem

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!

Original source