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

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')
    });
});

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