title: Making Fixed floating element scrolling smoothly in Firefox and Chrome
body: <p>I have a script that uses jQuery and CSS to position something at the top of the page when it scrolls. However, the bar looks like it's shaking when you scroll and it has been fixed to the top of the browser in Google Chrome and Mozilla Firefox. Why could this be?</p>
  
  <p>I hope you can understand what I'm trying to describe. If not, copy and paste this code along with a jQuery library to see what I mean:</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  body {
      height:1000px;
      margin:0;
      padding:0;
  }
  
  #scroller {
      position:relative;
      top:60px;
      width:100%;
      background:#CCC;
      height:20px;
  }
  &lt;/style&gt;
  
  &lt;script type='text/javascript'&gt;
      $(window).load(function() {
          $(window).scroll(function() {
              if($(window).scrollTop()&gt;60) {
                $('#scroller').css('top', $(window).scrollTop());
              }
          });
      });
  &lt;/script&gt;
  
  &lt;div id="scroller"&gt;Some controls&lt;/div&gt;
  </code></pre>