Recreating the Apple Store's summary that moves with the page scrolling

Question

I'm looking to create something like what Apple has on their online store for displaying the summary of your computer and total as seen here. I'm guessing this is JavaScript, but it'd be even cooler if it could be done in CSS.

Basically I'd like something scrolls with the page like position:fixed, but I don't want it to start moving until the user has scroll past a certain position.

I'm using jQuery, so a jQuery plugin would be perfect as well.

Answer 1

Try something like this

var min = 10; //Set your own here
$(window).scroll(function() { 
  var scrollTop = $(window).scrollTop()
  if(scrollTop > min)
    $('.divClass').css({  top: "0" });
  else
    $('.divClass').css({ top: (min - scrollTop) + "px" });
});

CSS

.divClass
{
  position:fixed,
  left: 500px /* or whatever */
}