如何使用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] });
}