Adding parallax effect to background color

Question

I am working creating a parallax effect. I have an image and a background color. Based on the scroll this background color must move top and when scroll back to 0, it should move to its actual position.

At the moment, when I scroll this color moves directly to top and when scroll position moves back to 0, it does not come down.

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

That's because you didn't remove the top rule when it comes back to zero:

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

This demo will work, but that's just a "bandage". I would suggest using an initial top instead.

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>