ナビゲーションの変更ページ上のアクティブなクラス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); 

イム。問題の原因となっているコードレイアウトに間違いはありますか？

ありがとうございます。

Scott。

Answer 1

問題は、それを定義する前に、strictモードを有効にして、$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/