title: change css class based on scroll position
body: <p>I have the following HTML</p>
  
  <pre><code>&lt;header class="fixed"&gt;...&lt;/header&gt;
  &lt;div id="content"&gt;
      &lt;div id="sidemenu" class="fixed"&gt;...&lt;/div&gt;
      &lt;div id="scroll"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;footer class="fixed"&gt;...&lt;/footer&gt;
  </code></pre>
  
  <p>With various positioning rules in the CSS and the rule</p>
  
  <pre><code>.fixed {
      position: fixed;
  }
  </code></pre>
  
  <p>This achieves the desired affect of only the div with id scroll moves. However, this can leaves the footer out of view.</p>
  
  <p>What I want to do, is once the bottom of the scroll div reaches the bottom of the footer, change <code>position: fixed</code> to <code>position: absolute</code> and then everything will scroll up together revealing the footer.</p>
  
  <p>But I don't know how to do it. I was looking at <a href="https://github.com/imakewebthings/jquery-waypoints" rel="nofollow">waypoints</a> but I'm in a little over my head.</p>