title: How to make floating sidebar stop floating before the footer to not overlap with it
body: <p>I have a custom script with a floating sidebar that keeps floating along the post. </p>
  
  <p>How to stop floating the sidebar and fix it at its current position on screen before it overlaps with the footer by 10px?</p>
  
  <p>I have created a JS fiddle to explain:
  <a href="http://jsfiddle.net/Dj3cW/1/" rel="nofollow">http://jsfiddle.net/Dj3cW/1/</a></p>
  
  <p>You will see that the <code>#sidebar</code> overlaps with <code>#footer</code>. How to prevent it from further floating down the screen before the <code>#footer</code> by <code>10px</code></p>
  
  <p>Keep in mind also that the document height is not fixed because some pages may show more posts than others.</p>
  
  <p>Thanks</p>