6

我正在为一个项目使用出色的 jQuery Reel 插件 ( http://jquery.vostrel.cz/reel )。我想绑定到窗口滚动事件，所以当用户向下滚动页面时，插件会前进 1 帧，例如每滚动 10 像素，如果用户向上滚动，则动画会反转。

该插件具有我可以将值传递给没有问题的方法，并且我知道如何绑定到窗口滚动事件。我正在努力的是最后一个。

我如何使用 jQuery/JavaScript 来表示在任何垂直方向上滚动的每 10 个像素在动画中前进 1 帧？我知道我可以将窗口滚动存储在一个变量中，但我不确定每次它达到 10 的倍数前一帧时怎么说。

提前谢谢了。

编辑

感谢以下用户的帮助，我制定了解决方案。如下：

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

所以在这里我在 windowScrollCount 中获取滚动距离，将其转换为 animationFrame 中的帧并使用 .reel("frame", animationFrame); 将其设置回来。我实际上每 100 帧就这样做一次，因为每 10 帧就快了。

4

3 回答 3

6

感谢 codef0rmer 和 noShowP 的帮助，我找到了解决方案。如下：

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

所以在这里我在 windowScrollCount 中获取滚动距离，将其转换为 animationFrame 中的帧并使用 .reel("frame", animationFrame); 将其设置回来。我实际上每 100 帧就这样做一次，因为每 10 帧就快了。

于 2012-05-03T13:26:22.523 回答
3

如果我错了，那么你可能想要这个：

var jump = 500;  // consider this is your 10px 
window.scrollHeight = 0;
$(window).scroll(function () {
   console.log($(this).scrollTop());
   var diff = $(this).scrollTop() - window.scrollHeight;
    if (diff >= jump) {
       window.scrollHeight = $(this).scrollTop();   
       console.log('reload frame');
    }
});

演示：http: //jsfiddle.net/Dyd6h/

于 2012-05-03T12:10:28.463 回答
1

您可能在页面顶部有一个粘性元素，

位置：固定；前 0；左：0；

（如果你喜欢隐藏）。

然后当你滚动时，你可以监控它的偏移量：

$('element').offset().top

然后，您可以看到页面向下滚动了多远，因此每次滚动时，您都会看到它的最高值是多少并适当地触发事件？

编辑：

我已经建立了一个小 JSfiddle，开始我认为你需要的东西。

http://jsfiddle.net/qJhRz/3/

我只是计算您需要使用的帧并将其存储在变量中。是不是和你要找的一样？

于 2012-05-03T10:12:14.270 回答