为什么（jQuery）Waypoint“bottom-in-view”对隐藏的元素无效？

我正在尝试使用jQuery & Waypoints（formely jQuery Waypoint）在用户滚动时动态显示隐藏图像。为什么（jQuery）Waypoint“bottom-in-view”对隐藏的元素无效？

我发现我可以很轻松地添加一个航点的元素，并有该元素为“鉴于”（与胶印属性设置在底部的视图）的处理程序触发。

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

例如：当他们进入视口时隐藏已经显示的元素很容易。（Example 1: jsFiddle）：

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

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

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

我找到了解决办法。我使用了一个空的（但不是隐藏的）div，我将它附加到航点上。然后，当我向下滚动到前面的div时，航点被执行。在div的处理程序中，我使用jQuery来显示其他元素。（Example 3: jsFiddle）：

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

不过，我仍然困惑，为什么航点被window.load后立即解雇（）当连接到隐藏要素。尽管未显示，但航点所附的元素仍在页面的下方。

来源

2015-06-21 Alexandre

它不只是'bottom-in-view'。当元素被隐藏并显示无时，每个偏移都会失败。这在the Waypoints debugging guide section on display none elements详细介绍。

航点的工作方式要求在该位置是在页面上，这样它可以计算出在哪里滚动它需要触发处理程序的元素。但显示没有元素不要住在页面上。当被问到时，这些元素在0,0处报告自己。

来源

2015-08-14 04:01:35 imakewebthings

为什么（jQuery）Waypoint“bottom-in-view”对隐藏的元素无效？

回答

相关问题