Question

The header to my tumblr page seems a bit jumpy when I attempted to animate its growth and shrinkage when it is no longer on the top of the page.

The webpage is Tobacco Endeavors and is a tumblr blog.

<script type="text/javascript">                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            $("#abracadabra").fadeOut(500, function(){ 
                $("#header").animate({padding:"1.5em 0"}, 500);
            });
        } else {
            $("#abracadabra").fadeIn(500, function(){ 
                $("#header").animate({padding:"1em 0"}, 500);
            });
        }
    }); 
</script>

Thanks a bunch guys.

Answer 1

The scroll event could fire many times, you need to control concurrency with a flag, like so:

<script type="text/javascript">
    window.flag = true;                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeOut(500, function(){ 
                   $("#header").animate({padding:"1.5em 0"}, 500, function() {window.flag = true;});
               });
            }
        } else {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeIn(500, function(){ 
                   $("#header").animate({padding:"1em 0"}, 500, function(){window.flag = true;});
               });
            }
        }
    }); 
</script>

UPDATE:

Updated a typo in code. Try new version above.