title: Fixed element flicker issue when using mousewheel scroll
body: <p>I am trying to make the side bar become fixed at the top after scrolling to a certain point. </p>
  
  <pre><code>var sidebarTopPos = $('#sidebar').offset().top;
  $(window).scroll(function(event) {
      if ($(window).scrollTop() &gt;= sidebarTopPos) {
          $('#sidebar').css({
              position: 'fixed',
              top: 0
          });
      }
      else {
          $('#sidebar').css({
              position: 'relative'
          });
      }
  });​
  </code></pre>
  
  <p>Take a look at this <a href="http://jsfiddle.net/3HFCM/2/" rel="nofollow">jsfiddle</a></p>
  
  <p>The whole thing works fine when I drag the scrollbar down. However, when I try to scroll using the mousewheel, I see the annoying flicker when the side bar changes from "relative" to "fixed" I've tried so many things. Please help.</p>
  
  <p><strong>EDIT</strong>: Maybe I should have been more clear. The side bar "flickers" only when it crosses the top div</p>