title: setting div to position: fixed on scroll with jquery causes content below to jump up
body: <p>As you scroll down, the top bar goes up and the moment the top bar gets out of sight, the header gets set to <code>position: fixed;</code>.  The moment this happens, the content below takes a massive jump upward with 1 scroll wheel click.</p>
  
  <p>I'm assuming its probably something simple I'm overlooking, but wanted to check to see if someone else saw the issue.  I've looked through it, but can't really see whats happening right off.</p>
  
  <p>I've set up a jsfiddle to show this code in full.</p>
  
  <p><a href="http://jsfiddle.net/yZVjU/" rel="nofollow noreferrer">http://jsfiddle.net/yZVjU/</a></p>
  
  <pre><code>$(document).ready(function() {
      var s = $("#header");
      var pos = s.position();                    
      $(window).scroll(function() {
          var windowpos = $(window).scrollTop();
          //$("#header_left").html("Distance from top:" + pos.top + "&lt;br /&gt;Scroll position: " + windowpos);
          if (windowpos &gt;= pos.top) {
              s.addClass("stick");
          } else {
              s.removeClass("stick"); 
          }
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header { float: left; width: 100%; height: 60px; background: #fff; }
  #header_left { float: left; display: inline; width: 650px; height: 100px; }
  #header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }
  
  
  .stick {
      position:fixed;
      top:0px;
      /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
      z-index: 1000;
  }
  </code></pre>
  
  <p>If you get to the position where the header gets set to fixed, and click up and down, you'll see where the content below is jumping more than 1 click.</p>