title: Fixed position menu when scrolling until it hits the bottom of a relative container
body: <p>I'm trying to simulate what Yelp does with their <a href="http://www.yelp.com/search?find_desc=restaurants&amp;find_loc=San%20Francisco,%20CA&amp;ns=1" rel="nofollow">Mo Map</a>. </p>
  
  <p>I know how to get an flip an element to fixed position once it reaches a certain screen scroll position, but how do you turn off fixed position once it hits the bottom of a relative container?</p>
  
  <p>The <a href="http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" rel="nofollow">css sticky position</a> solves this, but since its fairly new, it doesnt have great coverage. </p>