javascript - 为背景色添加视差效果

我正在创建视差效果。我有图像和背景色。基于滚动，该背景色必须移至顶部，并且当滚动回0时，它应移至其实际位置。

此刻，当我滚动时，此颜色直接移到顶部，而当滚动位置移回0时，它不会下降。

function parallax() {
  var image = document.getElementById('image');
  image.style.top = -(window.pageYOffset / 0.5) + 'px';
}

window.addEventListener("scroll", parallax, false)

body {
  background: cyan;
}

#image {
  background: green;
  width: 100px;
  height: 100px;
  top: 310px;
  right: -30px;
  position: absolute;
}

.frst {
  color: white;
  position: relative;
  width: 100px;
  height: 100px;
}

<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;">
  <div id='image'></div>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>

最佳答案

这是因为您没有在top规则恢复为零时将其删除：

if (image.style.top === "0px") {
  image.style.top = "";
}

该演示将起作用，但这仅仅是一个“绷带”。我建议改用最初的上衣。

function parallax() {
  var image = document.getElementById('image');
  image.style.top = -(window.pageYOffset / 0.5) + 'px';
}

window.addEventListener("scroll", parallax, false)

body {
  background: cyan;
}

#image {
  background: green;
  width: 100px;
  height: 100px;
  top: 0;
  right: -30px;
  position: absolute;
  transform: translateY(310px);
}

.frst {
  color: white;
  position: relative;
  width: 100px;
  height: 100px;
}

<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;">
  <div id='image'></div>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv  <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>

关于javascript - 为背景色添加视差效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60541546/