Le code JavaScript fourni anime la carte pour qu'elle se déplace lorsque l'utilisateur fait défiler :

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

Résoudre le problème

L'utilisation de la méthode animate() dans la fonction de défilement n'est pas recommandée car elle peut entraîner des conflits en raison de changements continus dans le valeur de défilement, empêchant jQuery d'effectuer des animations répétitives. La fonction stop() à elle seule pourrait ne pas résoudre entièrement le problème.

Au lieu de cela, il est recommandé d'utiliser la méthode CSS. Voici un exemple :

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

De plus, évitez d'utiliser plusieurs instructions if else dans vos calculs, car cela peut également provoquer des conflits.

Approche alternative

Pour Dans les scénarios où l'objectif est de fixer un élément de navigation à une position de défilement spécifique, envisagez l'approche suivante :

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