title: Scrolling sticky header jumping
body: <p>I'm creating a header that'll stick in place when the user scrolls down past a set amount of pixels. My header is 121 pixels high, but the part of the header I want to stick is the bottom 42 pixels of the header; which does work, but at the point it begins to stick the page jumps up about 50 pixels.</p>
  
  <p>My thought on what could be causing the issue is <code>$('#header').css({position: 'fixed'});</code>. I think once <code>fixed</code> is applied the content, the content <code>div</code> no longer takes the margin into account. I've tried to play around with the different positions, but nothing has worked out for me.</p>
  
  <p>I created a <strong><a href="http://jsfiddle.net/6kPzW/">JSFIDDLE</a></strong> to better illustrate my issue.</p>
  
  <p><strong>JQUERY CODE</strong></p>
  
  <pre><code>$(window).scroll(function()
  {
      if( $(window).scrollTop() &gt; 79 )
      {
          $('#header').css({position: 'fixed'});
      } 
      else 
      {
          $('#header').css({position: 'static', top: '-79px'});
      }
  });
  </code></pre>
  
  <p><strong>CSS CODE</strong></p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
  }
  #header {
      width: 100%;
      height: 121px;
      background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
  }
  #content {
      margin: 10px auto;
      width: 300px;
      min-height: 600px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="header"&gt;header&lt;/div&gt;
  &lt;div id="content"&gt;content goes here&lt;/div&gt;
  </code></pre>