내비게이션 변경 페이지에서의 활성 클래스 jQuery로 스크롤

Question

페이지의 다른 섹션으로 스크롤하면서 naviagtion 클래스를 변경하려고하는데 오류가 발생했습니다. 다음은 현재 코드입니다.

(function($) { 
"use strict"; 

    $(document).ready(function() { 

    $(document).on("scroll", onScroll); 

    //smoothscroll 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 

     var target = this.hash, 
      menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top+2 
     }, 500, 'swing', function() { 
      window.location.hash = target; 
      $(document).on("scroll", onScroll); 
     }); 
    }); 
}); 

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('.menu li a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('.menu li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 

    })(jQuery); 

WordPress 테마에서 사용하려고합니다. 문제를 일으킬 수있는 코드 레이아웃에 실수가 있습니까?

미리 감사드립니다.

Scott.

Answer 1

문제는 그것을 정의하기 전에 엄격 모드가 활성화 된 당신이 $target를 사용하고있을 수 있습니다. 선언 목록에 $target 초기화 (쉼표로 목록에 추가) 해보십시오.

(function($) { 
"use strict"; 

    $(document).ready(function() { 

    $(document).on("scroll", onScroll); 

    //smoothscroll 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 

     var target = this.hash, 
      menu = target, 
      $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top+2 
     }, 500, 'swing', function() { 
      window.location.hash = target; 
      $(document).on("scroll", onScroll); 
     }); 
    }); 
}); 

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('.menu li a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('.menu li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 

    })(jQuery); 

Answer 2

sticky nav bar을 작성 하시겠습니까? 그렇다면 어떻게해야합니까?

https://jsfiddle.net/moongod101/se4a7bm0/