如何使用javascript確定響應式視差站點中元素的最終滾動位置

Question

我有一個視差網頁，其中包含一系列模塊，這些模塊包含一張大照片和一個較小的文本框，該文本框覆蓋了照片，並且絕對位於照片的底部。 當照片大小改變時，文本框始終為340px。 最初，當網站滾動時，文本框是隱藏的（我正在執行translateY（340px）並在容器上隱藏溢出）。

我知道如何確定何時開始顯示框：

window.addEventListener('scroll', self.monitorScroll, false);
var moduleOffset = Math.floor($el.offset().top);
var moduleTriggerPos = moduleOffset - self.windowHalfHeight; //trigger animation when module is halfway up the screen


self.monitorScroll = function(){
  self.yPos = window.pageYOffset;
  if (self.yPos > thisObject.triggerPos){ 
    //BEGIN ANIMATION
  }
}

但是我不知道如何在每次觸發偵聽器時告訴對象移動多少。 調用的次數似乎取決於滾動的速度，並且我需要移動對象的數量不同，這是因為容器隨瀏覽器調整大小（瀏覽器越窄，照片變得越小）。

我目前正在使用靜態量來移動對象：

if (newPos >= 0){ //if our object hasn't reached a translateY(0px) value
    thisObject.curPos = 320 //starts at 320, the amount it has been translated by in order to hide it
    var newPos = thisObject.curPos - 25; //the amount we move it each time
    thisObject.textEl.css({ translate: [0,newPos] }); //move it by 25px
    thisObject.curPos = newPos; //update the current position
}

我如何更准確地確定要移動多少物品，而不是使用靜態移動量。 我希望它基於我滾動到模塊最終顯示位置的方式所占的百分比，理想情況下，這將是模塊完全以全屏瀏覽器寬度（最大寬度為1200px）完全位於屏幕頂部時的狀態，或者如果他們將瀏覽器的尺寸調整得更小一些。

我不需要確切的代碼，而僅是對我應該監視/計算以確定正確位置的概念的理解。 謝謝！

Answer 1

我想通了。 由於各種原因，我使CSS動畫的觸發點在它第一次出現在屏幕上而不是中途時開始，然后使用以下代碼：

var scrollProgress = (((self.windowHeight+self.yPos)-thisObject.offset)/thisObject.height);
var scrollAmt = scrollProgress*self.moduleTextHeight;
var translateAmt = -scrollAmt;

if (scrollAmt <= self.moduleTextHeight){
  thisObject.textEl.css({ translate: [0,translateAmt] });
} else {
  thisObject.textEl.css({ translate: [0,-self.moduleTextHeight] });
}