[giwuf]

Есть блоки с картинками.
Как сделать так, чтобы экран оставался на месте, а картинки плавно сменялись при скролле вниз и возвращались в обратной последовательности при скролле вверх?

Важное уточнение: картинки нужно спозиционировать относительно родительского врапера, а не глобального window, чтобы не отображалась сама полоса скролла, т.е. здесь свойство window.pageYOffset мне не подойдет.

У меня не получается это сделать, т.к. не понимаю к какому свойству зацепиться или каким другим путем пойти.

Код:

var section1 = document.getElementById('section1').offsetTop;
var section2 = document.getElementById('section2').offsetTop;
var section3 = document.getElementById('section3').offsetTop;
var section4 = document.getElementById('section4').offsetTop;

var scrollOffset = 300;

window.addEventListener("scroll", function() {

  var scroll = window.pageYOffset + scrollOffset;
  console.log(scroll);

  if (scroll < 500) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/b47sample3.jpg');
  }

  if (scroll > section2) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider4.jpg');
  }

  if (scroll > section3) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider3.jpg');
  }

  if (scroll > section4) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider1.jpg');
  }
});

<section id="section1">
  <div class="img-block">
    <div class="grid-image image-1 active"><img src="https://webdevtrick.com/wp-content/uploads/b47sample3.jpg" /></div>
  </div>
</section>
<section id="section2">
  <div class="img-block">
    <div class="grid-image image-2 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider4.jpg" /></div>
  </div>
</section>
<section id="section3">
  <div class="img-block">
    <div class="grid-image image-3 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider3.jpg" /></div>
  </div>
</section>
<section id="section4">
  <div class="img-block">
    <div class="grid-image image-4 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg" /></div>
  </div>
</section>

img {
  width: 400px;
  display: block;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

@media (min-width: 700px) {
  img {
    width: 500px;
  }
}

@media (min-width: 1000px) {
  img {
    width: 700px;
  }
}

Буду очень признателен за помощь!