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

Question

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

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

有什么建议吗？

Answer 1

事件未被触发，因为只有当滚动窗口的顶部到达航点时，才会触发航点。在您的情况下，永远不会到达航点，因为您的HR元素永远不会滚动到窗口的顶部。

解决这个问题的一种方法是给航点

一个偏移参数

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

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

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

Answer 2

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

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

Answer 3

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

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