当元素变得可见时增加?

Increment when element becomes visible?

我正在使用 skrollr 插件。

我有一套箭。一个指向下方,另一个指向上方。当您单击向下箭头时,它会将您带到动画的下一个 section/chapter。现在效果很好。但我的问题是假设用户执行以下操作:

He/she 滚动到页面的一半(比方说第 5 部分)。然后他们决定看看还剩下多少动画。所以他们单击下一个部分箭头。

此用户将被置于第 2 部分,即使他们位于第 5 部分,因为我无法检测用户何时点击每个部分,因此我无法更新箭头 #hrefAnchor。

我在想的是添加一个间隔/事件侦听器,它会检测该部分何时在 DOM 上可见,并更新箭头以将您带到上一个和下一个部分。

有谁知道我如何实现这个想法?...并且会在 ie >= 9

中工作

如果你给你的元素一个 class 比如 "visible",你可以 select 所有可见的元素通过使用 jQuery:

$(".element.visible:last-of-type").on("click", function() {

});

如果您愿意修改 Skrollr 库,我所做的是添加:

else if(prop === 'javascript') {
    eval(val);
}

作为 skrollr.setStyle 中的一个选项,它允许您使用 data-XXX="javascript:myFunction();" 在元素上为任意 JavaScript 代码添加一个钩子,就像这里的每个部分一样,我相信 Skrollr 甚至仍然会为您在参数中插入数字。

如果您可以控制单击 "next" 时执行的内容,您能否检查当时的滚动值以确定它在哪个部分之间并打开它以将它们发送到适当的部分?从本质上讲,与其试图始终保持目标当前状态(这很容易 wasteful/difficult/error 发生),不如在重要的时候计算它 - 当点击发生时。