title: Sticky Header - buggy jumping on scroll
body: <p>I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere.</p>
  
  <p>At a specific document height (scrollable until a little more than calling of sticky-effect) the sticky header jumps between <code>position: fixed</code> and <code>position: static</code>. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div id="not-sticky"&gt;&lt;/div&gt;
    &lt;div id="sticky"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;div id="content"&gt; ...
  </code></pre>
  
  <p><br>
  <strong>jQuery:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var $sticky = $("#sticky");
  var offset = $sticky.offset();
  var stickyTop = offset.top;
  var windowTop = $(window).scrollTop();
  $(window).scroll(function() {
    windowTop = $(window).scrollTop();
    if (windowTop &gt; stickyTop) {
      $sticky.css({
        position: 'fixed',
        top: 0
      });
    }
    else {
      $sticky.css({
        position: '',
        top: ''
      });
    }
  });
  </code></pre>
  
  <p><br>
  <strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>header {
    width: 100%;
  }
  
  #not-sticky {
    padding: 50px 0;
    width: 100%;
  }
  
  #sticky {
    padding: 24px 0;
    position: relative;
    width: 100%;
    z-index: 25;
  }
  </code></pre>
  
  <p><br>I also tried a margin-bottom on <code>#not-sticky</code> with the same height as the <code>#sticky</code> to keep a constant document-height, but the same jumpy-sticky-effect occurred.</p>
  
  <p>Any idea to fix that thing?</p>