يعمل كود JavaScript المقدم على تحريك الخريطة للتحرك أثناء تمرير المستخدم:

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

معالجة المشكلة

لا يُنصح باستخدام طريقة animate() داخل وظيفة التمرير لأنها قد تؤدي إلى تعارضات بسبب التغييرات المستمرة في قيمة التمرير، مما يمنع jQuery من تنفيذ رسوم متحركة متكررة. الدالة stop() وحدها قد لا تحل المشكلة بالكامل.

بدلاً من ذلك، يوصى باستخدام طريقة CSS. إليك مثال:

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

بالإضافة إلى ذلك، تجنب استخدام عبارات if المتعددة في حساباتك، حيث يمكن أن يؤدي ذلك أيضًا إلى حدوث تعارضات.

نهج بديل

لـ السيناريوهات التي يكون الهدف فيها هو إصلاح عنصر التنقل في موضع تمرير محدد، فكر في الطريقة التالية:

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