有没有办法在不同的滚动点改变不同的图像？

<div id="image"></div>

#image {
  width: 200px;
  height: 200px;
  transition: background-image 0.3s ease-in-out;
}

.image-1 {
  background-image: url(image1.jpg);
}

.image-2 {
  background-image: url(image2.jpg);
}

.image-3 {
  background-image: url(image3.jpg);
}

window.addEventListener('scroll', function() {
  var imageElement = document.getElementById('image');
  var scrollPosition = window.scrollY;

  if (scrollPosition < 500) {
    imageElement.classList.remove('image-2');
    imageElement.classList.remove('image-3');
    imageElement.classList.add('image-1');
  } else if (scrollPosition < 1000) {
    imageElement.classList.remove('image-1');
    imageElement.classList.remove('image-3');
    imageElement.classList.add('image-2');
  } else {
    imageElement.classList.remove('image-1');
    imageElement.classList.remove('image-2');
    imageElement.classList.add('image-3');
  }
});