Question

In jQuery, how do you make it so a DIV will stay put until the user scrolling down would make it no longer visible (at which point it sets its own CSS position to “fixed”)? It’s a trick I see a lot, just not sure how it’s done.

Example: http://www.yelp.com/search?find_desc=sushi&ns=1&find_loc=San+Francisco%2C+CA

Answer 1

Here’s a quick example of some code:

var standardPosition = $('div').offset().top;

$(window).scroll(function() {
    if ($(this).scrollTop() > standardPosition) $('div').css('position','fixed');
    else $('div').css('position','relative');
});

It’s important to store the starting position somewhere, so you know when you’ve scrolled up far enough to restore it to whatever position it was in.

http://jsfiddle.net/qC6HB/