javascript - 如何使用javascript确定响应式视差站点中元素的完成滚动位置

Question

我有一个包含一系列模块的视差网页，其中包含一张大照片和一个覆盖照片并绝对位于照片底部的较小文本框。虽然照片的大小发生变化，但文本框始终为 340 像素。最初，当网站滚动时，文本框被隐藏(我正在做一个 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
}

我如何更准确地确定要将元素移动多少，而不是使用静态移动量。我希望它基于我向模块的最终显示位置滚动的方式的百分比，理想情况下是当模块以全浏览器宽度(最大宽度为 1200 像素)完全位于屏幕顶部时，或者如果他们将浏览器调整得更小，则其中的一部分。

我不需要确切的代码，而只是对我应该监视/计算什么以确定正确定位的概念性理解。谢谢!

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] });
}