javascript - 带有嵌套 div 的 Jquery Waypoint 不起作用

Question

这是Fiddle

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

我有固定高度的outer div。在该 div 内，我有一个 inner div 和一个 Waypoint div。请在下面找到代码。

HTML

<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

The plugin documentation建议默认的“视口(viewport)”(如它所说)是 window 对象:

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

JSFiddle 但是会填充父 iframe；这就是为什么从技术上讲你永远不会将路径点与视口(viewport)(窗口)“对齐”。在路径点选项中添加自定义上下文，例如:

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

fiddle :http://jsfiddle.net/utTU4/