Eu tenho um mapa de <div id = 'map'> que desliza quando o usuário rola para baixo. No entanto, parece deixar o mapa rolar para sempre, nunca permitindo que o usuário realmente alcance a parte inferior da página (há um rodapé).

O que estou tentando fazer é fazer com que o <div> pare de rolar quando alcança o final de outro tamanho dinamicamente (a altura é variável) <div>. Esses dois <div> s estão lado a lado e na mesma linha.

Aqui está o código JavaScript que estou usando para fazer o div direito se mover com a rolagem do usuário:

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