How do you have a floating/fixed element on a web page depending on which part of the page is visible?

Question

The question is confusing, I know, but I just couldn't put it any other way.

Here's the url: Configure - Apple Store (U.S.)

The 'Summary' box on the side is aligned below the sub-header (with pictures of all the Mac models) and is at the same height as the content block. If you scroll the page up, the whole page goes up as expected. However, the moment the content block scrolls off the viewable area of the browser window, the summary block anchor itself to the top level and stays there even if you scroll to the far end of the page.

What is this behaviour called and what's the simplest, cleanest way to achieve it? I'd prefer a jQuery plugin and/or code snippet instead of plain JavaScript.

Answer 1

You can do something like this:

$(function () { 
  var $el = $('.fixedElement'), 
      originalTop = $el.offset().top;  // store original top position

  $(window).scroll(function(e){ 
    if ($(this).scrollTop() > originalTop ){ 
      $el.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
      $el.css({'position': 'absolute', 'top': originalTop}); 
    } 
  }); 
});

Check an example here.

Answer 2

I think you are looking for

jquery-scroll-follow

plugin