如何使用Javascript完成滚动视差的网页效果？

Question

我是 Javascript 初学者。最近看到一个有滚动视差效果的网站。当鼠标滚动时，图片会重叠移动，就像这个网站的效果一样

示例网站： http://www.firewatchgame.com/

let scrollH;
let photo1 = document.querySelector(".photo1");
let photo2 = document.querySelector(".photo2");
let photo3 = document.querySelector(".photo3");

document.addEventListener("scroll", function () {
  scrollH = window.pageYOffset;
  if (scrollH > 300) {
    photo1.style.transform = "translateY(-50px)";
  }
  if (scrollH > 300) {
    photo2.style.transform = "translateY(-100px)";
  }
  if (scrollH > 500) {
    photo3.style.transform = "translateY(-190px)";
  }
  console.log(scrollH);
});

body{
   background-color: #AEFEFF;
   height: 2000px;
}

container{
  position:relative;
  margin-top: 500px;
  width: 100%;
  display: flex;
}
.photo1{
  position: absolute;
  top:90px;
  left:20%;
  width: 600px;
  height: 200px;
  background-color: #FFEEAD;
  transform:translate3d(0px, -10, 0px));
  z-index:1;
}
.photo2{
  position:absolute;
  top:30%;
  right:10%;
  width: 800px;
  height: 200px;
  background-color: #D9534F;
  transform:translate3d(0px, 390px, 0px));
  z-index:2;
}

.photo3{
  position:absolute;
  top:50%;
  width: 900px;
  height: 300px;
  border-radius:300px;
  background-color: #96CEB4;
  transform:translate3d(0px, 960px, 0px));
  z-index:3;
}

<div class="container">
  <div class="photo1"></div>
  <div class="photo2"></div>
  <div class="photo3"></div>
</div>

]1

我也试过自己做一个，我只会用最简单的方法！ 但是现在网页滚动的时候出现了一个问题，元素确实移动了，但是我想让网页滚动的时候元素回到原来的地方，但是不知道怎么实现这样的效果，我不知道能不能帮我修改一下这个程序。

或者如果你做过类似的效果，有更好的写法，请分享给我，谢谢。

Answer 1

试试这个

use "photo" as a class for all the photos then add this line of code

if(scrollH>300) $('.photo').css("position", "fixed")