getting big lag with scroll()


I’m trying to animate my menu with jquery – simply change padding depending on scroll. It works fine, however takes extremely long to execute (1-10 seconds). Any ideas? I have tried .on(‘scroll’) but no change.

Both on Chrome and Firefox.

Fun thing – if I add alert(v); after 3rd line to be sure on scroll position, it animates well, without any lag ;x

        $(window).scroll(function() {
            var v = $(window).scrollTop();
            if (v >= 150) {
                $('#header').animate({"padding": "15px 0px"},500);
            else if (v < 150 ) {
                $('#header').animate({"padding": "50px 0x"},500);

You can see the problem here:


scroll event is fired on each scrolled pixel (or with some padding but…). You are just here setting many many entries in queue animation.
@A.Wolff that should be an answer.