title: Fixed header on-scroll with jQuery animate with stop
body: <p>After long search on google and everywhere I couldnt find a solution to my problem. I am developing a wordpress theme and having issue with my header on scrolling... On fast scrollbar scrolling the menu, logo, and header height does not return back to its state.</p>
  
  <p>How i can fix that???</p>
  
  <p>i am using this code:</p>
  
  <pre><code>jQuery(function(){
      jQuery('.header-v4').data('size','big');
  
      });
  
      if(jQuery(".header-v4.header-1").length &gt; 0){
      var ot = jQuery(".header-v4.header-1").offset().top;
      var head_height = jQuery(".header-v4").height();
      }
  
  
  jQuery(window).scroll(function(){
  
           var sticky = jQuery('.header-v4.header-1,.header-v4.header-2');            
  
                  if(sticky.length &gt; 0){
                      if(jQuery(document).scrollTop() &gt; ot){
                          sticky.addClass('fixed');
                          jQuery('.band.blog,#slider_holder').css('marginTop',head_height);
                      }else{
                          sticky.removeClass('fixed');
                          jQuery('.band.blog,#slider_holder').css('marginTop',0);
                      }
                  }
  
  
  
                  if(jQuery(document).scrollTop() &gt; 200){
  
                      if(jQuery('.header-v4').data('size') == 'big')
                      {
                          jQuery('.header-v4').data('size','small');
  
                          //Header-1
                          jQuery('.header-1 img.logo').stop().animate({width:'80%'},'fast');
                          jQuery('.header-1 .logo_vertical_align').stop().animate({marginTop:'15px'},'fast');
                          jQuery('.header-1 .navigation').stop().animate({marginBottom:'15px'},'fast');
                          jQuery('.header-1 .nav-header-v4').stop().animate({height:'0px'},'fast');
                          jQuery('.header-v4.header-1').stop().animate({height:'60px'},'fast');
  
                      }
  
  
                  }else{
  
                          if(jQuery('.header-v4.fixed').data('size') == 'small')
                      {
                          jQuery('.header-v4.fixed').data('size','big');
  
                          //Header-1
                          jQuery('.header-1 img.logo').stop().animate({width:'100%'},'fast');
                          jQuery('.header-1 .logo_vertical_align').stop().animate({marginTop:'30px'},'fast');
                          jQuery('.header-1 .navigation').stop().animate({marginBottom:'0px'},'fast');
                          jQuery('.header-1 .nav-header-v4').stop().animate({height:'96px'},'fast');
                          jQuery('.header-v4.header-1.fixed').stop().animate({height:head_height},'fast')
  
  
                      }  
              }
      });
  </code></pre>
  
  <p>Really appreciate your support  </p>
  
  <p>the initial code was taken from this post : <a href="https://stackoverflow.com/a/16442479">https://stackoverflow.com/a/16442479</a></p>
  
  <p>you can test the issue on this url : <a href="http://expobizxml.janxcode.com" rel="nofollow noreferrer">http://expobizxml.janxcode.com</a></p>