使用 waypoints 向下滚动到 div 时突出显示导航 link

Question

我已经为此搜索了一段时间，但找不到适合我的解决方案。我把不同文章的东西放在一起，但我只能让 link 突出显示，当我向上滚动时它似乎没有删除 class。此外，当我向下滚动时，所有 link 都会突出显示，而不仅仅是与 div.

关联的 link

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

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

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

Answer 1

Waypoints 通常只是通过主题标签和匹配 ID 将 link 连接到内容。我在你的例子中没有看到 linking ，这可能就是为什么它对你不起作用的原因......或者如果你对整个上下文更加慷慨的话它可能会在那里;）

您需要一个将当前 class 从上一个传递到下一个的中继，并且您需要在内容和导航 link 之间有一个 link 最常见的东西，例如标签指向内容。

想法是：

<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>

然后你有一个内容块，里面有你所有的-waypoints 从 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')
    });
});

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

使用 waypoints 向下滚动到 div 时突出显示导航 link

Highlight nav link when scrolling down to div using waypoints

jquery

jquery-waypoints