0

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

  1. 当用户向下滚动页面并到达锚定的 div（链接在菜单中）时，菜单中的链接应该获得类 "active"。
  2. 当用户点击一个锚点时，页面应该滚动到锚定的 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。我希望你们中的一个人可以为我指出正确的方向，以了解如何使其正常工作。非常感谢您的帮助！

4

1 回答 1

0

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

  1. 菜单包含一个不是锚点的链接，因此出现错误Uncaught Error: Syntax error, unrecognized expression: 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>

为了重现，您将需要此处提供的 smoothscroll 库。这总体上是有效的，但是不确定性能。干杯!

于 2016-08-25T07:32:17.783 回答