Der bereitgestellte JavaScript-Code animiert die Karte so, dass sie sich bewegt, wenn der Benutzer scrollt:

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

Behebung des Problems

Die Verwendung der animate()-Methode innerhalb der Scroll-Funktion ist nicht ratsam, da dies aufgrund ständiger Änderungen in der zu Konflikten führen kann scroll-Wert, wodurch verhindert wird, dass jQuery sich wiederholende Animationen ausführt. Die Funktion stop() allein löst das Problem möglicherweise nicht vollständig.

Stattdessen wird empfohlen, die CSS-Methode zu verwenden. Hier ist ein Beispiel:

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if ( scrollVal > offset.top) {
        $sidebar.css({
           'margin-top': (($window.scrollTop() - offset.top)   topPadding)   'px'
                       //added  'px' here to prevent old internet explorer bugs
        });
    } else {
        $sidebar.css({'margin-top':'0px'});
    }
});

Vermeiden Sie außerdem die Verwendung mehrerer if else-Anweisungen in Ihren Berechnungen, da dies ebenfalls zu Konflikten führen kann.

Alternativer Ansatz

Für In Szenarien, in denen das Ziel darin besteht, ein Navigationselement an einer bestimmten Bildlaufposition zu fixieren, sollten Sie Folgendes berücksichtigen Ansatz:

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
      //this will calculate header's full height, with borders, margins, paddings
       console.log(headerH);
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
        //when scroll value reach to your selector
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });