Sliding / following navigation menu

I am looking for a simple jQuery or Javascript solution to make a navigation sidebar smoothly follow开发者_如何学编程ing the user when he scrolls down a page. Something like here: http://ucon-acrobatics.com/shop/

Any ideas are appreciated.

First get the top position:

offset_top = $("#menu").offset().top     // absolute
position_top = $("#menu").position().top // relative to parent

Then create an event:

$(window).scroll(function() {
  if($(this).scrollTop() >= offset_top) {
    $("#menu").css("top", $(this).scrollTop() - position_top);
  }
});

See also my example: http://jsfiddle.net/elektronikLexikon/LaVmG/

or change to animate link in the 2nd version: http://jsfiddle.net/elektronikLexikon/LaVmG/2/

The easiest way is to use position:fixed on the nav, this has the advantages of not being so laggy.

You might decide to use position:absolute until the user has scrolled past a certain point before moving to position:fixed.