Change div height when at top of page - long delay? - Jquery -

sorry if basic of questions - i'm total novice when comes jquery/javascript! i've had around answer dont know search!

i want have fixed navigation bar shortens if user not @ top of page, working fine me:

http://jsfiddle.net/2nw6u/

$(document).ready(function(){  $(function () {     $(window).scroll(function () {         if ($(this).scrolltop() < 10) {             $('#headercontent').animate({paddingtop: '18px', paddingbottom:'18px'}, 300);         } else {             $('#headercontent').animate({padding: '0px'}, 300);         }     });  }); 

});

...but there considerable delay when scroll top of page, causing , how can around it?

this happens because scroll event fired multiple times , each time fires queue new animation..

you need clear queue each time (by using .stop())..

if ($(this).scrolltop() < 10) {     $('#headercontent').stop(true, false).animate({         paddingtop: '18px',         paddingbottom: '18px'     }, 300); } else {     $('#headercontent').stop(true, false).animate({         padding: '0px'     }, 300); 

demo at http://jsfiddle.net/gaby/2nw6u/4/