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

Question

我目前正在尝试根据以下标准为 Wordpress 网站实现菜单：

当用户向下滚动页面并到达锚定的div（在菜单中编辑link）时，link菜单应该 得到 class "active".
当用户点击锚点时，页面应该滚动到锚点div，并且link 应该收到 "active" class.

这是该页面的 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");
        }
    });
  }
});

逻辑如下：

监听滚动并相应地添加 "active" class。
单击 link 时，停止 (1.)，滚动到锚点，添加 class "active"，然后继续 (1.)

这是我与 jQuery 的第一部作品。我希望你们中的一位能为我指出正确的方向，让我知道如何让它正常工作。非常感谢您的帮助！

Answer 1

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

菜单包含一个 link 不是锚点，因此出现错误 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 对象是否包含任何元素。

link 突出显示和平滑滚动的工作 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>

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

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

Wordpress/jQuery: Highlight matching anchors when div is in viewport on scroll

navigation

wordpress

anchor

jquery

anchor-scroll