Question

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

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

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

非常感谢提前。

修改

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

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

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

Answer 1

感谢codef0rmer和noShowP的帮助，我制定了一个解决方案。如下：

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

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

Answer 2

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

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/

Answer 3

您可以在页面顶部添加粘性元素，

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

（如果你愿意，可以隐藏）。

然后当您滚动时，您可以监控其偏移量：

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

然后您可以看到您滚动页面的距离，因此每次滚动时都会看到它的最高值是什么并且适当地触发事件？

编辑：

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

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

我只是计算您需要的帧并将其存储在变量中。它是你想要的吗？

jQuery窗口滚动事件。滚动每个XX像素

3 个答案: