jQuery Waypoints 插件 - 不在视野范围内时删除类答案

【问题标题】：jQuery waypoints plugin - remove class when out of viewjQuery Waypoints 插件 - 不在视野范围内时删除类
【发布时间】：2017-03-22 05:49:20
【问题描述】：

我正在使用航点插件

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

现在我想修改它以使添加的类在离开浏览器视图时立即从.thing 元素中删除。我要在上面的代码中添加什么？

【问题讨论】：

你能做一个演示吗？

标签： jquery css jquery-plugins

【解决方案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%'
})

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

【讨论】：

我测试过了，谢谢。当页面向下滚动时，如何将其删除？
我试过 if (direction == 'up' || direction == 'down') 没用
@Pavel 我鼓励自己尝试解决这个问题。仅供参考，我以前从未使用过航点，只需阅读有关您问题的文档，它似乎是一个简单的库。如果您无法弄清楚，请发一个新帖子。
我以前读过。我的意思是它应该很简单。只是加下来。但它不起作用 - if (direction == 'up';) { $(".menu-item-939").removeClass("subactive"); } else if (direction == 'down';) { $(".menu-item-939").removeClass("subactive"); } else { $(".menu-item-939").addClass("subactive"); }

【解决方案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/

【讨论】：