Wordpress/jQuery：当div在滚动视口中时，高亮显示匹配的锚

Question

我目前正在尝试为Wordpress网站实现一个菜单，其标准如下：

1. 当用户向下滚动页面并到达锚定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>

下面的代码几乎可以工作-但是，它抛出以下错误：

未捕获错误：语法错误，无法识别的表达式：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。我希望你们中的一位能为我指明正确的方向，让我知道如何正确地工作。非常感谢你的帮助！

Answer 1

最终找出了问题所在：

1. 菜单包含一个不是锚的链接，因此错误未捕获错误：语法错误，未识别的表达式：http://domain.com/not-the-current-page

解决此问题后，出现另一个错误：

Uncaught TypeError: Cannot read property 'top' of undefined

我按照这里的逻辑摆脱了这个

基本上，在获取jQuery对象的偏移量之前，我必须检查它是否包含任何元素。

用于链接高亮显示和平滑滚动的jQuery代码现在如下所示：

 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(document).off("scroll");
    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.length) {
        if (refElement.position().top-100 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            jQuery('.secondary-link a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
        }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>