제공된 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 else 문을 여러 개 사용하지 마세요. 이렇게 하면 충돌이 발생할 수도 있습니다.

대체 접근 방식

특정 스크롤 위치에서 탐색 요소를 수정하는 것이 목표인 시나리오에서는 다음 접근 방식을 고려하세요.

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