当用户向下滚动时，如何垂直滑动掉图像的各层？

<div class="image-container">
  <img src="image1.jpg" class="image" alt="Image 1">
  <img src="image2.jpg" class="image" alt="Image 2">
  <img src="image3.jpg" class="image" alt="Image 3">
</div>

.image-container {
  position: relative;
  height: 100vh; /* 设置容器高度为视口高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: top 0.5s ease; /* 添加滑动动画效果 */
}

.image:nth-child(2) {
  top: 100%; /* 初始位置为容器高度，使第二张图像在下层 */
  z-index: 1; /* 设置层级为1 */
}

.image:nth-child(3) {
  top: 200%; /* 初始位置为容器高度的两倍，使第三张图像在最下层 */
  z-index: 0; /* 设置层级为0 */
}

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var imageContainer = document.querySelector('.image-container');
  var images = document.querySelectorAll('.image');

  // 计算滚动距离对应的图像位置
  var image1Position = -scrollTop;
  var image2Position = -scrollTop + imageContainer.offsetHeight;
  var image3Position = -scrollTop + imageContainer.offsetHeight * 2;

  // 更新图像的top属性值
  images[0].style.top = image1Position + 'px';
  images[1].style.top = image2Position + 'px';
  images[2].style.top = image3Position + 'px';
});