Question

Here is an example. When you scroll down, the nav bar gets animated. When you scroll back to the top it should be animated back. Unfortunately, this happens very slow. This has porbably to do with the fact that every you scroll, the coordinates have to be checked and calculated.

In other words, I am looking for a way to make this snippet more efficient:

$(window).scroll(function(){
    var supra = $("div#supra-top-wrap"),
        topWrap = supra.children("div#top-wrap"),
        subNav = supra.children("nav#sub-nav");

    if ($(window).scrollTop() > 0){
        topWrap.animate({"top":"-38px"}, 400);
        subNav.animate({"top":"-70px"}, 400);
    }
    else {
        topWrap.animate({"top":"0"}, 400, function() {
            subNav.animate({"top":"0"}, 400);
        });
    }
});

Oh, and here is a Fiddle to get your way with.

Answer 1

I think it’s a simple case of animations being queued, so they execute only after previous animations are completed, so after about 400ms. Try adding stop(), like this:

topWrap.stop().animate(...)
subNav.stop().animate(...)

This should stop any running animations and start the new one right away.