Mam mapę <div id = 'map'>, która przesuwa się, gdy użytkownik przewija w dół. Jednak wydaje się, że mapa przewija się w nieskończoność, nigdy nie pozwalając użytkownikowi dotrzeć do dolnej części strony (jest stopka).

Próbuję przerwać przewijanie <div>, gdy osiągnie koniec innego dynamicznie wielkości (wysokość jest zmienna) <div>. Te dwa <div> s są obok siebie i w tym samym rzędzie.

Oto kod JavaScript, którego używam, aby przesunąć odpowiedni div z przewijaniem użytkownika:

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