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

Question

I have a parallax web page with a series of modules that contain a large photo and a smaller text box that overlays the photo and sits absolutely positioned at the bottom of it. While the size of the photos change, the text box is consistently 340px. Initially, when the site scrolls, the text box is hidden (I am doing a translateY(340px) and hiding the overflow on the container).

I know how to determine when to start revealing the box:

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

but I don't know how to tell the object how much to move each time the listener is triggered. The number of times it is called seems to be based on how fast you scroll, and the amount I would need to move the object differs, as the container resizes with the browser (the narrower the browser, the smaller the photo becomes).

I am currently using a static amount to move the object:

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
}

How do I get more accurate determination of how much to move the item by, rather than using a static movement amount. I want it to be based on the percentage of the way I've scrolled toward the module's final reveal position, which would ideally be when the module was fully at the top of the screen at full browser width (max width of 1200px), or some percentage thereof if they had resized the browser smaller.

I don't need exact code, but more just a conceptual understanding of what I should be monitoring / calculating to determine the correct positioning. Thanks!

Answer 1

I figured this out. For various reasons I made the trigger point for the CSS animation start when it first appears on screen rather than halfway up, then used this code:

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