j查询窗口滚动事件.每滚动 XX 个像素

jQuery window scroll event. For every XX pixels scrolled

本文关键字：滚动 XX 像素 事件 查询 窗口      更新时间：2023-09-26

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

该插件具有我可以毫无问题地传递值的方法，并且我知道如何绑定到窗口滚动事件。我正在挣扎的是最后一个。

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

提前非常感谢。

编辑

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

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

所以在这里我得到了 windowScrollCount 中的滚动距离，将其转换为 animationFrame 中的帧，并使用 .reel("frame"， animationFrame( 将其设置回来;我实际上每 100 帧这样做，因为每 10 帧都是快速的。

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

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

所以在这里我得到了 windowScrollCount 中的滚动距离，将其转换为 animationFrame 中的帧，并使用 .reel("frame"， animationFrame( 将其设置回来;我实际上每 100 帧这样做，因为每 10 帧都是快速的。

如果我

错了，那么你可能需要这个： 

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/

您可以在页面顶部放置一个粘性元素，

位置：固定; 顶部 0; 左： 0;

(如果您愿意，可以隐藏(。

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

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

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

编辑：

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

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

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

相关文章：