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

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%"});