如何根据滚动位置逐步获取元素

Question

我试图将waypoint用于两个特定的功能。

1. 识别用户是向上还是向下滚动并且容器进入视图。这不起作用。
2. 我试图弄清楚如何做的第二件事并不一定与航点有关。我希望您在片段中看到的图像基于滚动渐进逐渐增加transform: translateX。我不知道该怎么做。我将翻译放在片段中以显示运动。

If you go to this site并向下滚动到“Nike and Snapchat”部分，你会看到Lebron的手机形象。当您逐步向上或向下滚动时，图像会相应移动。这就是我想要复制的内容。

有谁知道我能做些什么才能实现这个目标？

var homeMainSec = 	$('#homeMainSec');
	
homeMainSec.waypoint(function(direction) {
  if (direction === 'down') {
    $('#homeBoxGridRight img').addClass('slideLeftDisplay');
    console.log('Left Slide');
  }
}, {
  offset: '25%'
});
homeMainSec.waypoint(function(direction) {
  if (direction === 'up') {
    $('#homeBoxGridRight img').addClass('slideRightDisplay');
    console.log('Right Slide');
  }
}, {
  offset: '25%'
});

#homeMainSec {
	width: 100%;
	height: 95vh;
	position: relative;
	margin-top: 70px;
}
.homeMainBlock {
	height: 100%;
	width: 50%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
/*- HomeBoxGridRight Section -*/
#homeBoxGridRight img {
	display: block;
	width: 40%;
	height: auto;
	margin-left: 50%;
}
.slideLeftDisplay {
	transform: translateX(-100px);-webkit-transform: translateX(-100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}
.slideRightDisplay {
	transform: translateX(100px);-webkit-transform: translateX(100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="homeMainSec">
  <div class="homeMainBlock" id="homeBoxGridLeft">
  </div><div class="homeMainBlock" id="homeBoxGridRight">
    <img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="Image">
  </div>
</section>
<br><br><Br><br><br><br><br><br>

Answer 1

这为您提供了垂直滚动的页面滚动位置

window.pageYOffset

这为您提供了身体的总滚动高度

document.querySelector("body").scrollHeight

您需要减去给定的滚动条元素的高度

document.scrollingElement.offsetHeight

您可以根据垂直滚动位置和身高的比率进行平移

window.pageYOffset/(document.querySelector("body").scrollHeight - document.scrollingElement.offsetHeight)

这将为您提供当前位置与最大可滚动位置的比率。随意操纵它，以便将元素转换为初始位置。