title: How to make a div not scroll off the page using jquery
body: <p>Basically I have a structure which is something like this:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div&gt; main content &lt;/div&gt;
     &lt;div&gt; toolbar &lt;/div&gt;
     &lt;div&gt; results &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>When scrolling down, I want the "main content" to disappear off the screen. The 'toolbar' to stay flush with the top of the page, and the 'results' to scroll, disappearing into the 'toolbar' as they scroll.</p>
  
  <p>EDIT: the toolbar starts off in the middle of the screen. I want it to scroll to the top, but then no further, but the rest of the page (below) keeps scrolling.</p>
  
  <p>I found this tutorial <a href="http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/" rel="nofollow">http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/</a></p>
  
  <p>But this is slightly different. In the example above, although the toolbar stays near the top, it prevents the results from being scrolled.</p>