javascript - $(window).scroll event firing inconsistently -

making header resizes after scrolling, have works when scroll downwards, fails when scroll way top , attempt header larger again. it'll resize, , won't; , it's never instant.

here's code:

$(window).scroll(function () { if ($(document).scrolltop() >= 50) {     $('.header').animate({         'padding': 0     }, 300); } else {     $('.header').animate({         'padding-top': 15,         'padding-right': 7,         'padding-bottom': 15,         'padding-left': 25     }, 300); }}); 

thanks in advance

you need have flag this, checks whether same thing has been done or not. there might glitches in following code, need tweak in right environment. if needed, change first line true.

var flag = false; $(window).scroll(function () {   if ($(document).scrolltop() >= 50) {     if (flag) {       $('.header').animate({         'padding': 0       }, 300);       flag = false;     }   } else {     if (!flag) {       $('.header').animate({         'padding-top': 15,         'padding-right': 7,         'padding-bottom': 15,         'padding-left': 25       }, 300);       flag = true;     }   } }); 

setting flag here, make sure function gets executed once, during range.