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

Question

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

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

有什么建议么？

Answer 1

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

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

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

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

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

Answer 2

将百分比从顶部传递到offset:而不是显式像素从顶部传递。

$('containerDiv').waypoint(function() {
        $('targetElem').fadeIn();
    }, { offset: '50%' });

Answer 3

如果您希望航点在从底部进入屏幕的元素上触发，请设置offset: '100%'

  $('hr').waypoint(function(event, direction) {
    // Do something
  }, {offset: "100%"});