jquery - Leave menu bar fixed on top when scrolled

Question

I've seen some websites that when the user scrolls down the page a box would pop-up to the right or left...

Also, noticed this template: http://www.mvpthemes.com/maxmag/ the designer does a nice job leaving the nav bar fixed on top.

Now, how are these done? I guess it uses jquery to get the position of the page and to show the box.

Can you please guide me to where I can find a snippet so I can learn to do something like that.

Answer 1

This effect is typically achieved by having some jquery logic as follows:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

This says once the window has scrolled past a certain number of vertical pixels, it adds a class to the menu that changes it's position value to "fixed".

For complete implementation details see: http://jsfiddle.net/adamb/F4BmP/