Tengo un mapa <div id = 'map'> que se desliza a medida que el usuario se desplaza hacia abajo. Sin embargo, parece que permite que el mapa se desplace para siempre, nunca permitiendo que el usuario llegue al final de la página (hay un pie de página).

Lo que estoy tratando de hacer es hacer que <div> deje de desplazarse cuando llegue al final de otro tamaño dinámico (la altura es variable) <div>. Estos dos <div> están uno al lado del otro y en la misma fila.

Aquí está el código JavaScript que estoy usando para hacer que el div derecho se mueva con el desplazamiento del usuario:

$(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
            });
        }
    });
});