jquery - jQuery Waypoints 和更改导航类

Question

我正在使用 Waypoints.js，并且有一个关于在到达某个航点时更改导航项样式的问题。当到达 26 后的航路点时，我正在使用此代码向菜单项 menu-item-29 添加一类黑色。它可以工作，但是当您滚动离开航点时，黑色类不会被删除（它会保留）。当航点被滚动时，如何删除黑色类？谢谢。

$(document).ready(function() {
$(".post-26").waypoint(function () {
$('#menu-item-29').addClass('black');
});
});

Answer 1

航路点函数被传递一个direction参数。使用它来确定是否应该添加或删除。

$('.post-26').waypoint(function(direction) {
  if (direction === 'down') {
    $('#menu-item-29').addClass('black');
  }
  else {
    $('#menu-item-29').removeClass('black');
  }
});

或者，由于 jQuerytoggleClass采用第二个布尔参数来指示是添加还是删除，您可以这样写：

$('.post-26').waypoint(function(direction) {
  $('#menu-item-29').toggleClass('black', direction === 'down');
});