jquery animated main nav - fixed after scroll

[klemme]

I have this function which fades in a main menu when scrolled more than 100px.

$(document).ready(function() {  
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
    $('#main_nav_fixed').fadeIn(500);
    } else {
    $('#main_nav_fixed').fadeOut(500);
    }
});
});

It works fine, but if the user scrolls fast up and down lets say 10 times, and goes to the top of the screen, the menu fades in and out according to times scrolled more than 1oopx down.

How do I add the .stop function to that so that it will not que animations but only do one at the time, anyone?

Regards, Klemme

[gavinflud]

    $('#main_nav_fixed').stop().fadeIn(500);
} else {
    $('#main_nav_fixed').stop().fadeOut(500);

That's where it will have to be put. It also takes two arguments which can be added in if you want to remove the queued animation or if you want to complete the current animation immediately (both default to false).

See here for more information on how to use it effectively.

[klemme]

Thanks gavinflud!

$('#main_nav_fixed').stop(true,true).fadeIn(500);
} else {
$('#main_nav_fixed').stop(true,true).fadeOut(500);

That did the trick :-)

But it killed the animation, so it just pops out now, no fading..

Any idea if its hard to keep the fadein anim?

/Klemme

[gavinflud]

.stop( [clearQueue] [, jumpToEnd] )
clearQueue - A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd - A Boolean indicating whether to complete the current animation immediately. Defaults to false.

That sounds like the second argument, which you have set to true, is causing that. Try setting the arguments like: .stop(true, false) and see if that solves it.