title: Fix a div when scrolling down a page and then un-fix
body: <p>I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.</p>
  
  <p>There is a perfect emaxple of what I am trying to describe on this site <a href="http://madebymany.com/blog/apples-aesthetic-dichotomy" rel="nofollow">http://madebymany.com/blog/apples-aesthetic-dichotomy</a></p>
  
  <p>In the left column, it sticks as you scroll down and then un-sticks at the bottom</p>
  
  <p>I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties.  I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did  half the job.  I am not sure even what to call this feature?</p>