title: Making jQuery top toolbar less jumpy
body: <p>I am trying to affix a toolbar to the top of the page.  The only thing that can push it out of the way is the logo.  My affect works but the scrolling is very jumpy.  If one scrolls very fast, especially on a mobile phone it takes a few ms to reposition itself and the effect is noticeable.  This is simply an example.  In my real site there is a logo image and the toolbar contains images.  The text should flow under the toolbar hence the high z-index.  The logo should push it down if the user scrolls to the top.</p>
  
  <pre><code>        &lt;html&gt;
                  &lt;head&gt;
                  &lt;style type="text/css"&gt;
                  #logo {
                          width:100%;
                          height:34px;
                  }
  
                  #toolbar {
                          position: fixed;
                          top: 35px;
                          z-index:1000;
                  }
                  &lt;/style&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                          &lt;div id="logo"&gt;LOGO&lt;/div&gt;
                          &lt;div id="toolbar"&gt;TOOLBAR&lt;/div&gt;
                          &lt;div id="content"&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                                  &lt;p&gt;lorem ipsum doler&lt;/p&gt;&lt;br /&gt;
                          &lt;/div&gt;
                  &lt;/body&gt;
                  &lt;script&gt;
                    $(document).scroll(function(e) {
                      if($(window).scrollTop() &lt; 35)
                          $("#toolbar").css('top',(35 - $(window).scrollTop()) +  'px');
                        else
                     $("#toolbar").css('top','0px');
                 });
                 &lt;/script&gt;
          &lt;/html&gt;
  </code></pre>