title: Sidebar that follows scroll, but scrolls self, if taller than viewport
body: <p>(Hey, first post from a longtime lurker :) </p>
  
  <p>I've built a simple sidebar that does the '<a href="http://jqueryfordesigners.com/fixed-floating-elements/" rel="noreferrer">absolute-to-fixed</a>' trick to stay on screen, but would like to take in account scenarios, where the sidebar is higher than the viewport.</p>
  
  <p>So I came up with this idea. It all starts as in above:</p>
  
  <ul>
  <li>On page load, the sidebar is drawn at starting location, some distance from viewport top.</li>
  <li>When the user scrolls the page, the sidebar moves with the content</li>
  <li>If sidebar fits the viewport vertically, it fixes to the top</li>
  </ul>
  
  <p>But here it gets more dynamic:</p>
  
  <ul>
  <li><p>If sidebar is taller than the viewport, it <strong>continues</strong> to scroll with the content until the <strong>bottom</strong> of the sidebar is reached, and it fixes there. The top of the sidebar scrolls beyond top of viewport.</p></li>
  <li><p>When the user scrolls back towards page top, the sidebar moves with the content until the <strong>top</strong> of the sidebar is reached, and it fixes there. The bottom of the sidebar scrolls beyond the bottom of the viewport.</p></li>
  </ul>
  
  <p>This way the sidebar reacts to scrolling as usual, while sticking around close enough to find on long pages.</p>
  
  <p>Any pointers to examples, or jQuery- friendly code snippets/guidelines would be much appreciated.</p>