title: More efficient way to handle $(window).scroll functions in jquery?
body: <p>In the code below, I'm checking to see if the window is being scrolled past a certain point and if it is, change an element to use fixed position so that it doesn't scroll off the top of the page.  The only problem is that is seems to be HIGHLY client-side-memory intensive (and really bogs down the scrolling speed) because at every single scroll pixel I am updating the style attributes over and over on the element.  </p>
  
  <p>Would checking if the attr is already there before attempting to update it make a significant difference?  Is there a completely different and more efficient practice to get the same result?</p>
  
  <pre><code>$(window).scroll(function () {
      var headerBottom = 165;
      var fcHeight = $("#pnlMainNavContainer").height();
  
      var ScrollTop = $(window).scrollTop();
      if (ScrollTop &gt; headerBottom) {
          $("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
          $("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
      } else {
          $("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
          $("#AddFieldsContainer").removeAttr("style");
      }
  });
  </code></pre>
  
  <p>As I'm typing this, I notice that StackOverflow.com using the same type of functionality with their yellow "Similar Questions" and "Help" menus on the right hand side of this page.  I wonder how they do it.</p>