title: Fixing a menu in one direction in jquery
body: <p>I have a "fixed" menu bar on the left side of a website that I want to follow the scrollbar down the page when the user scrolls. I've tried two approaches so far, one css, and one jquery:</p>
  
  <p>1) My first attempt was to use css style fixing:</p>
  
  <pre><code>#leftframe {
   position:fixed;
   width: 200;
  }   
  </code></pre>
  
  <p>Normally, this works great on vertical scrolling. The problem with this solution is that when the window isn't very wide, and the user tries to scroll, it goes right over the page contents.</p>
  
  <p>2) After some research, I found that there's a jquery approach that allows you to fix an element in one direction, as described on stack overflow here: <a href="https://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y">CSS: fixed position on x-axis but not y?</a></p>
  
  <p>Using the approach outlined there, I wrote this nice little function to do it for me:</p>
  
  <pre><code>function float_vertical_scroll(id) {
      $(window).scroll(function(){
          $(id).css({
              'top': $(this).scrollTop() //Use it later
          });
      });
  }
  </code></pre>
  
  <p>Only, now the problem is, I've tried this in Chrome and Safari, and both show a noticeable flicker of the menu bar during vertical scrolling. The menu moves in a very "choppy" fashion, where the css solution smoothly slid it down the page.</p>
  
  <p>Does anyone know why the jquery solution is so choppy, and if anything can be done about it? Is there some third solution that will give me the "best of both worlds"?</p>
  
  <p>Thanks everyone.</p>