jquery - jquery航点“向上”事件的不同偏移量

Question

我很想在 jquery waypoint 中有 2 个偏移量。目前只有一个相同的用于向上和向下滚动。

我正在使用 25% 的“向下”偏移，并且想要“75%”的“向上”偏移。因此，当块的顶部位于视口顶部的 25% 并且 scolling 向下时，会触发“向下”。当一个块的顶部位于视口顶部的 75% 并且 scolling 向上时，会触发“向上”。

有人已经为这种滞后写过代码吗？

Answer 1

您可以通过创建两个航路点来做到这一点，每个航路点都有不同的偏移量，每个航路点只响应一个方向：

$('.thing').waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
}).waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});

更新：如果您使用的是 Waypoints 3.0 的 jQuery 构建，上述代码将无法工作，因为waypoint不再链接 jQuery 对象。相反，它返回创建的 Waypoint 实例的数组。如果您对保留该数组引用不感兴趣，则代码如下所示：

var $things = $('.thing');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
});

$things.waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});