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
  }
}

但是我不知道如何在每次触发侦听器时告诉对象移动多少。它被调用的次数似乎取决于你滚动的速度，以及我需要移动对象的数量不同，因为容器随浏览器调整大小（浏览器越窄，照片就越小）。 / p>

我目前正在使用静态金额来移动对象：

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

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

1 个答案: