Setting CSS value limits of the window scrolling animation

I have a <div id='map'> map that slides as the user scrolls down. However, it seems to let the map scroll forever, never letting the user actually reach the bottom of the page (there is a footer).

What I am trying to do is get the <div> to stop scrolling when it reaches the end of another dynamically-sized (height is variable) <div>. These two <div>s are side-by-side and in the same row.

Here is the JavaScript code I'm using to make the right div move with the user's scroll:

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});