Question

我已经搜索了一段时间，但找不到适合我的解决方案。我将不同文章中的内容放在一起，但是我只能使链接突出显示，并且当我向上滚动时，似乎并没有删除类。另外，当我向下滚动时，所有链接都将突出显示，而不仅仅是与div相关联的一个链接。

 var $navLinks = $('#about-nav > a'); 

      $navLinks.each(function() {
        var $self = $(this);

        $(this).waypoint({
            handler: function() {
              $self.addClass('current');
          }
       });
     });

Answer 1

航点通常只是通过标签和匹配ID将链接链接到内容。我在您的示例中看不到该链接，这可能就是为什么它对您不起作用的原因……或者，如果您对整个上下文更加慷慨，也许会一直存在；）

您需要一个将当前类从上一个传递到下一个的中继，并且您需要在内容和导航链接之间建立链接，最常见的是诸如指向内容的主题标签。

想法是：

<nav>
  <li><a href="#waypoint1">Go to content1</a></li>
  <li><a href="#waypoint2">Go to content2</a></li>
  <li><a href="#waypoint3">Go to content3</a></li>
</nav>

然后您将获得一个内容块，其中包含从waypoint1到waypoint3的所有航点，例如：

<div id='your-waypoints'>
   <div id='waypoint1' class='waypoint'>
      blah-blah-blah
   </div>
   <div id='waypoint2' class='waypoint'>
      blah-blah-blah
   </div>
   <div id='waypoint3' class='waypoint'>
      blah-blah-blah
   </div>
</div>

通过脚本连接点，例如：

function getWaypointNavRef( WaypointId ) {
    return $('nav a[href="#' + WaypointId + '"]');
}

var lastNavRef = null;
function WaypointRelay( WaypointId ) {
   var nextNavRef = getWaypointNavRef( WaypointId );
   if (lastNavRef)
      $(lastNavRef).removeClass('current');
   $(nextNavRef).addClass('current');
   lastNavRef = nextNavRef;
}

从处理程序中调用哪个：

$('#your-waypoints > .waypoint').each(function () {
        new Waypoint({
        element: document.getElementById(this.id),
        handler: function (direction) {
            WaypointRelay(this.element.id);
        },
        context: document.getElementById('your-waypoints')
    });
});

这意味着当您向下滚动页面时，实际上是链接到导航的内容...

使用航点向下滚动到div时突出显示导航链接

1 个答案: