Jquery waypoint 事件不会在页面底部的元素上触发

Question

我正在尝试使用 jquery-waypoint 插件在页脚进入/离开视口(viewport)时触发事件。

我在 jsfiddle 上创建了一个示例但该事件不会在页脚元素上触发。

有什么建议吗？

Answer 1

该事件不会被触发，因为航点仅在滚动窗口顶部到达航点时触发。在您的情况下，航路点永远不会到达，因为您的 HR 元素永远无法滚动到窗口顶部。

解决此问题的一种方法是为航点提供偏移参数

$(document).ready(function() {
  $('hr').waypoint(function(event, direction) {
    alert(direction);
  }, {offset: 900});
});​

这将告诉 waypoint 在事件实际到达滚动窗口顶部之前 900px 处触发事件。但该解决方案并不是最佳的，因为它取决于用户的屏幕分辨率。您可以通过调整浏览器窗口大小来测试它并查看其性能。

不过有一个更好的解决方案。不知道你想要实现什么，我建议在上一篇文章中设置路径点。