jQuery窗口滚动事件。滚动每个XX像素 [英] jQuery window scroll event. For every XX pixels scrolled

问题描述

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

I am using the excellent jQuery Reel plugin (http://jquery.vostrel.cz/reel) for a project. I would like to bind to the window scroll event, so when the user scrolls down the page the plugin advances 1 frame for say every 10px scrolled, if the user scrolls up the animation is reversed.

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

The plugin has methods I can pass the values to no problem and I know how to bind to the window scroll event. What I am struggling with is the last.

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

How can I use jQuery/JavaScript to say for every 10 pixels scrolled in any vertical direction advance 1 frame in the animation? I know I can store the window scroll in a variable but I'm unsure how to say every time it hits a multiple of 10 advance one frame.

非常感谢提前。

编辑

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

Thanks to help of the users below I worked out a solution. As follows:

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

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

So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.

推荐答案

感谢codef0rmer和noShowP的帮助我工作了解决方案。如下：

Thanks to help of codef0rmer and noShowP I worked out a solution. As follows:

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

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

So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.

这篇关于jQuery窗口滚动事件。滚动每个XX像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！