Stop scrolling div overlap footer

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.

I have this demo here which illustrates my code here at jsFiddle.

The yellow box should stay here when the scrolling开发者_如何学C has surpassed the footer position, like so:

The jsFiddle should get you an idea. :-)

Check out this fiddle. I think this is what you're looking for

added another check to make sure the destination of the map doesn't go passed the footer before animating.

My alternative:

http://jsfiddle.net/YRAmf/1/

was working on it only to find someone beet me to it :P

or more to my liking:

http://jsfiddle.net/YRAmf/3/

Maybe I'm missing something here, but the yellow div in your fiddle did not overlap the footer at all; it stopped about 20px above it. More details maybe?