title: Make div stick to top of page after scrolling past another div?
body: <pre><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="sticky"&gt;&lt;/div&gt;
  &lt;div id="section"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  
  &lt;style&gt;
    body { margin: 0px; background-color: #e3e3e3; }
    #header { background-color: #cb5454; height: 140px; }
    #sticky { background-color: #546bcb; height: 70px; }
    #section { height: 1500px; }
    #footer { background-color: #cb5454; height: 140px; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is my code: <a href="http://jsfiddle.net/uaqh018d/">http://jsfiddle.net/uaqh018d/</a></p>
  
  <p>I want #sticky to stick to the top of the page after scrolling past #header. <strong>I also want it hidden until stuck.</strong> And then of course have it unstick+hide again after scrolling back up to #header.</p>
  
  <p>How can I achieve this?</p>