如何让元素根据滚动位置逐步变换答案

【问题标题】：How to get element to transform progressively based on scroll position如何让元素根据滚动位置逐步变换
【发布时间】：2019-09-06 01:08:33
【问题描述】：

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

识别用户是向上还是向下滚动并且容器进入视图。这不起作用。
我试图弄清楚如何做的第二件事不一定与航点有关。我希望您在 sn-p 中看到的图像根据滚动进度逐步transform: translateX。我不知道该怎么做。我在 sn-p 中加入 translate 以显示动作。

If you go to this site 并向下滚动到“Nike 和 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>

【问题讨论】：

标签： javascript jquery css scroll jquery-waypoints

【解决方案1】：

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

window.pageYOffset

这为您提供了正文的总滚动高度

document.querySelector("body").scrollHeight

您需要减去由下式给出的滚动条元素的高度

document.scrollingElement.offsetHeight

您可以根据垂直滚动位置和正文高度的比例进行翻译

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

这将为您提供当前位置与最大可滚动位置的比率。随心所欲地操作它，将元素平移到它们的初始位置。

【讨论】：