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

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

how to determine finished scrolling position of element in responsive parallax site with javascript

javascript

css

scroll

parallax