jQuery: Something is delaying animations

Question

What makes the animation delay? All jQuery on the site is having some sort of delay..

$(function(){
  $(window).scroll(function() {
       var elementTop = $('body').offset().top; 
       var position = elementTop+ $(window).scrollTop();
       if(position >= 20){
           $('#top').animate({top: '40px'}, 300);
       } else if(position < 20){
           $('#top').animate({top: '80px'}, 300);
       }
console.log(position);
  });   
});

Live: Link here - It's the menu/navigation

Answer 1

Your code is being fired each time you scroll. The animate methods are being concatenated, running one after the other. To achieve what you want, you need to stop the current animation and start a new one:

$(function(){
    $(window).scroll(function(){
        var elementTop = $('body').offset().top,
        position = elementTop+ $(window).scrollTop();

        if (position >= 20){
            $('#top').stop().animate({top: '40px'}, 300);
        }
        else if (position < 20) {
           $('#top').stop().animate({top: '80px'}, 300);
        }
    });   
});