title: Change div css when user scrolls past it, using jQuery
body: <p>When a user scrolls past a div I need it's css changed to position:fixed.
  Much like what is done here: <a href="http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/" rel="nofollow">http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/</a> but with just plain jquery, without the plugin.<br>
  The div must also stop scrolling once the user scrolls to another div.<br>
  For example:</p>
  
  <pre><code>&lt;div id="stuff"&gt;&lt;/div&gt;
  &lt;div id="this"&gt;&lt;/div&gt;//must start scrolling with user when user reaches it.
  &lt;div id="footer"&gt;&lt;/div&gt;// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap
  </code></pre>
  
  <p>I'm assuming i'd use  <code>.scroll()</code> and <code>.css()</code>, but I have no idea where to go from there.</p>