jQuery窗口滾動事件。 滾動每個XX像素

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/

我只是計算你需要的框架並將其存儲在變量中。 這是你想要的東西嗎？