Question

我试图使用jQuery＆amp; Waypoints（formely jQuery Waypoints）在用户向下滚动时动态显示隐藏的图像。

我发现我可以非常轻松地向一个元素添加一个航点，并在元素“在视图中”时触发处理程序（在视图底部设置偏移属性）。

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

例如：当他们进入视口时隐藏已经显示的元素很容易。（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（）之后立即触发了航点。尽管没有显示，航点附加到的元素仍在页面下方。

Answer 1

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

Waypoints的工作原理是询问元素在页面上的位置，以便它可以计算触发处理程序所需的滚动位置。但是在页面上不显示不元素。当被问到时，这些元素会在0,0报告。

为什么（jQuery）Waypoints“bottom-in-view”对隐藏元素不起作用？

1 个答案: