title: jQuery sticky header jumps at specific height
body: <p>I'm trying to create a basic sticky header.
  The header contains 2 parts: <code>top</code> and <code>main</code>. When page is scrolled down, i want to keep only the <code>.main</code> sticky (so that the <code>.top</code> becomes invisible).</p>
  
  <p>I'm trying following code, but it is jerky and if the content has a specific height, it does not let scroll, starts jumping. I have captured video to illustrate the problem. Please see:
  <a href="http://www.screenr.com/Z89H" rel="nofollow">http://www.screenr.com/Z89H</a></p>
  
  <p>Here's the demo: 
  <a href="http://jsfiddle.net/M33g4/" rel="nofollow">http://jsfiddle.net/M33g4/</a></p>
  
  <p>(you might not see the issue because of different screen height, in that case drag the results window to set its height about 535px).</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="top"&gt;&lt;/div&gt;
      &lt;div class="main"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;section&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(window).scroll(function () {
     var height = $('header').outerHeight();
  
      if($(this).scrollTop() &gt; height){
          $('header').addClass('sticky');    
      }else{
          $('header').removeClass('sticky');
      }       
  });
  </code></pre>