带有嵌套div的Jquery Waypoint不工作

Question

这是小提琴

我试图让Waypoint在嵌套的div中工作，但无法做到这一点。

我有固定高度的outer div。在这个div里面，我有一个inner div和一个Waypoint div。请在下面找到密码。

<div style="background:grey;height:300px;overflow:auto;">
    <div style="height:900px;background:#F5F6CE;"></div>
    <div id="waypoint" style="background:#B45F04;">Waypoint</div>    
</div>

脚本

$('#waypoint').waypoint(function() {
    console.log('Reached waypoint.');
}, {
    offset: 'bottom-in-view'
});

文本到达了终点。从未在控制台中打印。有什么建议吗？

编辑:更新Fiddle。

Answer 1

插件文档建议默认的"viewport“(如它所称)是window对象：

$.fn.waypoint.defaults = {
  context: window,
  ...

然而，JSFiddle为父iframe提供了平台；这就是为什么您从未在技术上将您的路径点与视图(window)“对齐”的原因。在您的路径点选项中添加一个自定义上下文，例如：

context: $("#waypoint").parent()

小提琴：http://jsfiddle.net/utTU4/