Question

I am looking for a simple jQuery or Javascript solution to make a navigation sidebar smoothly following the user when he scrolls down a page.
Something like here: http://ucon-acrobatics.com/shop/

Any ideas are appreciated.

Answer 1

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/