jQuery Waypoint - 想要反转功能

Question

当您到达我网站的 div.main-content 区域时，我使用 jQuery Waypoint 调用“返回顶部”按钮，如下所示:

$('div.page.event div.main-content').waypoint(function() {
    $('button.scrollToTop').fadeIn(200);
});

但我不知道如何反转它，以便当您返回到 header.main-header 时按钮消失。我试过这个:

$('div.page.event header.main-header').waypoint(function() {
    $('button.scrollToTop').fadeOut(200);
});

但这行不通。我确信这太简单了，我只是没有捕获重点。有人可以帮忙吗？

Answer 1

您可以使用传递给航点函数的direction参数。它的值将是“向下”或“向上”，具体取决于用户穿过航路点时滚动的方向:

$('div.page.event div.main-content').waypoint(function(direction) {
  if (direction === 'down') {
    $('button.scrollToTop').fadeIn(200);
  }
  else {
    $('button.scrollToTop').fadeOut(200);
  }
});