如何获取元素以基于滚动位置进行逐步转换

Question

我正在尝试将航路点用于两个特定功能。

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)

这将为您提供当前位置与最大可滚动位置的比率。 您可以根据需要对其进行处理，以转换其初始位置的元素。