jquery - Wordpress/jQuery: スクロール時に div がビューポートにあるときに一致するアンカーを強調表示する

Question

私は現在、次の基準でWordpress Webサイトのメニューを実装しようとしています:

1. ユーザーがページを下にスクロールし、アンカーされた div (メニューにリンクされている) に到達すると、メニュー内のリンクはクラス "active" を取得する必要があります。
2. ユーザーが anchor をクリックすると、ページはアンカーされた div までスクロールし、リンクは「アクティブ」クラスを受け取る必要があります。

そのページの HTML は次のとおりです。

<nav class="sub-navigation">
<ul class="secondary-link">
<li><a href="#team"><span>Team</span></a></li>
<li><a href="#guidelines"><span>Guidelines</span></a></li>
<li><a href="#clients"><span>Clients</span></a></li>
</ul>
</nav>

次のコードはほとんど機能しますが、次のエラーがスローされます。

Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

jQuery(document).ready(function() {
 
  jQuery(document).on("scroll", onScroll);
  jQuery('.secondary-link a').click(function(event) {
    event.preventDefault();
    jQuery(document).off("scroll");
    var link = this; 
    jQuery.smoothScroll({
      offset: -100,
      speed: 1000,
      scrollTarget: link.hash
    });
  });
  jQuery('.secondary-link a').click(function(){
    jQuery('.secondary-link a').removeClass('active');
    jQuery(this).addClass('active');
    jQuery(document).on("scroll", onScroll);
  });

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

ロジックは次のとおりです。

1. スクロールをリッスンし、それに応じて「アクティブ」クラスを追加します。
2. リンクがクリックされたら、停止し (1.)、アンカーまでスクロールし、クラス「アクティブ」を追加してから再開します (1.)。

これは、jQuery を使用した最初の作業です。これを正しく機能させる方法について、誰かが私を正しい方向に向けてくれることを願っています。あなたの助けは大歓迎です!