Wordpress / jQuery：当div在滚动视口中时突出显示匹配的锚点

Question

我目前正在尝试按照以下标准为Wordpress网站实施菜单：

1. 当用户向下滚动页面并到达锚定的div（在菜单中链接）时，菜单中的链接应获取课程＆＃34;激活＆＃34; < /强>
2. 当用户点击主播时，该页面应滚动到已锚定的div ，该链接应该会收到＆＃34;有效＆＃34;类。

以下是该页面的HTML：

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

以下代码几乎可以正常工作 - 但是，它会抛出以下错误：

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

＆＃13;
＆＃13;
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");
        }
    });
  }
});
＆＃13;
＆＃13;
＆＃13;

逻辑如下：

1. 收听滚动并添加＆＃34;有效＆＃34;相应的课程。
2. 点击链接后，停止（1.），滚动到主播，添加课程＆＃34;激活＆＃34;，然后恢复（1。）

这是我第一次使用jQuery。我希望你们中的一位能指出我正确的方向，让我们正确地运作。非常感谢您的帮助！

Answer 1

终于弄清楚出了什么问题：

1. 该菜单包含一个不是锚点的链接，因此错误为Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

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

Uncaught TypeError: Cannot read property 'top' of undefined

我按照the logic here

删除了这个

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

用于链接突出显示和平滑滚动的工作jQuery代码现在看起来像这样：

＆＃13;
＆＃13;
 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");
        }
        }
    });
  }
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

要重现，您需要smoothscroll library available here。然而，这总体上是有效的，不确定性能。干杯！