title: jQuery change css properties smoothly on scroll
body: <p>I want to change the height of the header and add a class to it on the scroll. However I want to do it smoothly using the jQuery animate (or similar effect).
  The idea is to make the header sticky on the scroll and remove the sub header from it when it is in sticky form. That's why I fade out subheader when it is being scrolled. Is there a better way to do that?</p>
  
  <p>I have managed to do that with following code, however if you see the demo, the css changes are not smooth, it somehow jerky.</p>
  
  <p><strong>Demo:</strong></p>
  
  <p><a href="http://jsfiddle.net/kcW9a/" rel="nofollow">http://jsfiddle.net/kcW9a/</a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>var height = $('header').outerHeight();
  
  $(window).scroll(function() {
      if($(this).scrollTop() &gt; height)
          {
              $("header .subheader").fadeOut(200);
              $('header').addClass('stick');
              $('header').stop().animate({'height' : '50'}, 200);
  
          }else if($(this).scrollTop() &lt;= height)
          {
               $('header').removeClass('stick');
              $("header .subheader").fadeIn(200);
               $('header').stop().animate({'height' : '100'}, 200);
          }
   });
  $(window).scroll();
  </code></pre>