jQuery: animate(); with delay time -

i need little animate() jquery function.

i want when scrolldown white bar smaller bit , when come in top of page, white bar return normal.when scrolldown, works ok, when scrolltop white bar return normal delay , don't know why.i don't want it. if can, please me. thank you! sorry english.

html:

<div id="header">         <div id="sticky_navigation">             <div class="container">               <div class="row-fluid">                 <!-- logo block -->                 <div class="span2">                   <a href="#"><div class="logo1"></div></a>                 </div>                  <!-- nav block -->                 <div class="span6">                   <ul class="nav">                     <li><a href="#" class="active">home</a></li>                     <li><a href="#">about</a></li>                     <li><a href="#">services</a></li>                     <li><a href="#">testimonials</a></li>                     <li><a href="#">faq</a></li>                     <li><a href="#">blog</a></li>                   </ul>                 </div>                  <!-- contact block -->                 <div class="span4">                   <ul class="contact-list pull-right">                     <li><a href="#"><span class="contact"></span>contact us</a></li>                     <li><a href="#"><span class="cell"></span>(03) 9028 2424</a></li>                   </ul>                 </div>               </div>             </div>         </div>     </div><!-- #header --> 

css:

.header {     border-bottom: 1px solid #a4a4a4; }  #sticky_navigation {     width: 100%;     z-index: 200;     background: #fff;     border-bottom: 1px solid #a4a4a4; }  .logo1 {     background-position: 0 -186px ;     width: 169px;     height: 27px;     margin: 30px 0 28px 0; }  .nav {     margin:39px 0 0 0px; }  .nav li {     float: left;     margin-left: 25px }  .nav li a, .contact-list li {     text-transform: uppercase;     text-decoration: none;     color: #777777;     font-size: 18px;     font-weight: bold;     background-color: none; }  .nav li a:hover, .nav li a.active {     color: #000;     background-color: none; }  .contact-list {     margin: 39px 0 0 0; }  .contact-list li {     float: left; }  .contact-list li:first-child {     margin-right: 32px; }  .contact, .cell {     display: block;     float: left;      margin:2px 9px 0 0; }  .cell {     background-position: -201px -101px ;     width: 16px;     height: 16px; }  .contact {     background-position: -178px -101px ;     width: 19px;     height: 15px; } 

js:

var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; var sticky_navigation = function(){ var scroll_top = $(window).scrolltop();   if (scroll_top > sticky_navigation_offset_top) {      $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });      $( ".logo1" ).animate({ margintop: '10px' }, 1000);     $( ".nav" ).animate({ margintop: '19px'}, 1000);     $( ".contact-list" ).animate({ margintop: '19px' }, 1000);  } else {     $('#sticky_navigation').css({ 'position': 'relative' });       $( ".logo1" ).animate({ margintop: '30px' }, 1000);     $( ".nav" ).animate({ margintop: '39px'}, 1000);     $( ".contact-list" ).animate({ margintop: '39px' }, 1000);  }        };   sticky_navigation();   $(window).scroll(function() {      sticky_navigation(); }); 

i think problem call on "every" scroll sticky-navigation() function. if user scrolls sticky_navigation() called few times , animations go queue. ofcourse cause delay. guess calling stop() function on elements have effect want.

 $( ".logo1" ).stop(true,true).animate({ margintop: '10px' }, 1000);     $( ".nav" ).stop(true,true).animate({ margintop: '19px'}, 1000);     $( ".contact-list" ).stop(true,true).animate({ margintop: '19px' }, 1000); 

and

$( ".logo1" ).stop(true,true).animate({ margintop: '30px' }, 1000);     $( ".nav" ).stop(true,true).animate({ margintop: '39px'}, 1000);     $( ".contact-list" ).stop(true,true).animate({ margintop: '39px' }, 1000); 

....but calls unnecessary animate function....i think better be:

function sticky_navigation(){  var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; var sticky_navigation = function(){ var scroll_top = $(window).scrolltop(); var sdown = true; var sup = false; // true (and must true if scrolldown default javascript after pageload)   if (scroll_top > sticky_navigation_offset_top) {     if(sdown){     sdown = false;     sup = true;     $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });      $( ".logo1" ).stop(true,true).animate({ margintop: '10px' }, 1000);     $( ".nav" ).stop(true,true).animate({ margintop: '19px'}, 1000);     $( ".contact-list" ).stop(true,true).animate({ margintop: '19px' }, 1000);    } } else { if(sup){     sup=false;     sdown=true;      $('#sticky_navigation').css({ 'position': 'relative' });       $( ".logo1" ).stop(true,true).animate({ margintop: '30px' }, 1000);     $( ".nav" ).stop(true,true).animate({ margintop: '39px'}, 1000);     $( ".contact-list" ).stop(true,true).animate({ margintop: '39px' }, 1000);    }  }        };