Question

我正在使用航点插件

$('.thing').waypoint(function(direction) {
    jQuery(".block7").addClass("active");
});

现在我想修改它，以便在浏览器视图之外立即从.thing元素中删除添加的类。我在上面的代码中添加了什么？

Answer 1

您可以通过查看direction来完成此操作。如果相同的偏移量同时适用于添加和删除类，则可以将其放在处理程序中

var waypoint = new Waypoint({
  element: $('.thing'),
  handler: function(direction) {
    if (direction == 'up') {
      $(".block7").removeClass("active");
    } else {
      $(".block7").addClass("active");
    }
  },
  offset: '100%'
})

或者如果你想要不同的偏移，你可以制作2个航点。

var waypoint = new Waypoint({
  element: $('.thing'),
  handler: function(direction) {
    $(".block7").addClass("active");
  },
  offset: '75%'
})

var waypoint2 = new Waypoint({
  element: $('.thing'),
  handler: function(direction) {
    if (direction == 'up') {
      $(".block7").removeClass("active");
    }
  },
  offset: '100%'
})

这是一个codepen - http://codepen.io/anon/pen/oZqMdJ

Answer 2

这可以通过使用一个附加航路点来解决，该航路点测试方向是否等于向下，并使用负偏移量触发触发处理程序。当项目不在浏览器视图中时，负偏移量是使其正常工作的关键。

var resetWaypoint = new Waypoint({
  element: $('.thing'),
  handler: function(direction) {
    if (direction == 'down') {
      $(".block7").removeClass("active");
    } 
  },
  offset: '-10%'. /* where the magic happens. play with # til it works correctly with size of your element. */
})

更大的图片-如果您试图从根本上重置航路点，以便每次用户向上或向下滚动浏览航路点时，都可以淡入/淡出某些东西，则需要查看一下“查看”设置。这里有更多信息：

http://imakewebthings.com/waypoints/shortcuts/inview/

jQuery waypoints插件 - 在视图外删除类

2 个答案: