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

我爲項目使用了優秀的jQuery Reel插件（http://jquery.vostrel.cz/reel）。我想綁定到窗口滾動事件，所以當用戶向下滾動頁面時，如果用戶向上滾動動畫，則插件會前進1幀，例如滾動每10px。jQuery窗口滾動事件。對於滾動的每個XX像素

該插件有方法，我可以傳遞值沒有問題，我知道如何綁定到窗口滾動事件。我掙扎的是最後一個。

我該如何使用jQuery/JavaScript來說每10個像素在任何垂直方向滾動前進1幀動畫？我知道我可以將窗口卷軸存儲在一個變量中，但是我不確定如何在每次前進10幀的倍數時說出。

非常感謝提前。

編輯

感謝以下用戶的幫助，我制定了一個解決方案。具體如下：所以在這裏

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

我得到在windowScrollCount的滾動距離，將其轉化爲在animationFrame幀和與.reel設置回（「框架」，animationFrame）;我實際上是每100幀就做一次，因爲每10幀就要快一點。

來源

2012-05-03 mtwallet

感謝幫助codef0rmer和noShowP我研究出瞭解決辦法。具體如下：所以在這裏

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

來源

2012-05-03 13:26:22 mtwallet

你可能可以有你的頁面的頂部粘元素，

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

（隱藏，如果你喜歡）。

然後當你滾動，你可以監控它的偏移：

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

您就可以看到你有多遠下來的頁面滾動，所以每次他們滾動一次看到它的最高值和觸發事件appropiately？

編輯：

我已經成立了一個小的jsfiddle有什麼，我認爲你需要一個開始。

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

我只是計算你需要的和存儲在一個變量的框架。這是否像你想要的東西？

來源

2012-05-03 10:12:14 noShowP

感謝您的答覆，但那不是我想要的。我已經更新了上面的最後一段，以使要求更清楚。 – mtwallet

我以前從未使用過卷軸，您是否已經知道如何使其前進一幀，並且您只需要知道如何在每次滾動10px時調用這些事件？ – noShowP

我認爲你在這裏的正確路線，我可以參考變量中的幀數。我只是不明白如何當scrollTop命中10然後20然後30等等提前一個幀（或添加一個幀變量）。我現在開始明白感謝您的幫助 – mtwallet

如果我錯了，那麼你可能想這一點：

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-03 12:10:28 codef0rmer

codef0rmer謝謝你的回覆。這不是我想要的，儘管我現在開始瞭解我如何實現它。基本上每次scrollTop擊中10然後20然後30等提前一幀。 – mtwallet

codef0rmer感謝您的幫助，我已經完成了，請參閱上面的答案。 – mtwallet

@mtwallet：酷！很高興它的工作。 – codef0rmer

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

回答

相關問題