为什么 (jQuery) Waypoints“视图底部”不适用于隐藏元素？

我试图使用 jQuery 和 Waypoints（以前称为 jQuery Waypoints）在用户向下滚动时动态显示隐藏的图像。

我发现我可以很容易地向元素添加一个路径点，并在元素“在视图中”时触发处理程序（偏移属性设置在视图底部）。

但是，尝试使用相同的属性对隐藏元素不起作用：处理程序在页面加载后立即触发。

例如：当已经显示的元素进入视口时隐藏它们很容易。 （示例1：jsFiddle http://jsfiddle.net/aleveille/07k0pa0v/):

var waypoints = $('.dynamic').waypoint({
    handler: function (direction) {
        $(this).hide(700);
    },
    offset: 'bottom-in-view'
});

但是，我想做的是相反的：当我们滚动到隐藏元素的位置时显示它。下一个示例不起作用，因为处理程序是在 window.load() 事件之后立即触发的，而不是等待用户向下滚动。 （示例2：jsFiddle http://jsfiddle.net/aleveille/vu3g77fj/):

var waypoints = $('.dynamic').waypoint({ // these elements are display: none
    handler: function (direction) {
        $(this).show(700);
    },
    offset: 'bottom-in-view'
});

我找到了一个解决方法。我使用一个空的（但不是隐藏的）div 来附加航路点。然后，当我向下滚动到上述 div 时，该路径点就会被执行。在 div 的处理程序中，我使用 jQuery 来显示其他元素。 （示例3：jsFiddle http://jsfiddle.net/aleveille/hwfyueqd/):

var waypoints = $('#emptyDiv').waypoint({
    handler: function (direction) {
        $('.dynamic').show(700);
    },
    offset: 'bottom-in-view'
});

但是，我仍然很困惑为什么当附加到隐藏元素时，路径点会在 window.load() 之后立即触发。尽管未显示，但附加航路点的元素位于页面下方。

这不仅仅是'bottom-in-view'。当元素隐藏且不显示时，每个偏移都会失败。这在以下内容中有详细介绍Waypoints 调试指南部分显示无元素 http://imakewebthings.com/waypoints/guides/debugging/#display-none.

Waypoints 的工作原理是询问元素在页面上的位置，以便它可以计算滚动中需要触发处理程序的位置。但不显示任何元素don't住在页面上。当被问及时，这些元素将自己报告为 0,0。