为背景色添加视差效果

Question

我正在创建视差效果。 我有一个图像和一个背景颜色。 基于滚动，此背景颜色必须移动到顶部，当滚动回 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>

Answer 1

那是因为当它回到零时你没有删除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>