title: Stop scrolling div overlap footer
body: <p>I'm making a scrolling div for every scroll, the div is a Google maps applet that shows records, however I want the div to stop scrolling once it has reached just before the footer so it does not overlap the footer, which it should stop above it (with a 10/20px margin from the bottom) so the content on the footer does not get overlapped and unable to be read.</p>
  
  <p>I have this demo here which illustrates my code here at <a href="http://jsfiddle.net/J5yC7/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  
  <p>The yellow box should stay here when the scrolling has surpassed the footer position, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/jIB0b.png" alt="enter image description here"></p>
  
  <p>The jsFiddle should get you an idea. :-)</p>