JavaScript视差滚动效果：页面滚动位置的正确获取与应用

var doc = document.documentElement;
var value = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

// 获取需要进行视差效果的DOM元素
let stars = document.getElementById('stars');
let moon = document.getElementById('moon');
let mountain_behind = document.getElementById('mountain-behind');
let mountain_front = document.getElementById('mountain-front');
let btn = document.getElementById('btn');
let text = document.getElementById('text');

// 监听窗口的滚动事件
window.addEventListener("scroll", function() {
  // 正确获取页面垂直滚动位置
  var doc = document.documentElement;
  var value = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

  // 根据滚动值动态调整元素的CSS属性，实现视差效果
  // 不同的乘数（如0.25, 1.05等）决定了元素的移动速度和方向，从而产生视差感
  stars.style.left = value * 0.25 + 'px'; // 星星水平方向移动
  moon.style.top = value * 1.05 + 'px';   // 月亮垂直方向移动
  mountain_behind.style.top = value * 0.5 + 'px'; // 远山垂直方向移动
  mountain_front.style.top = value * 0 + 'px'; // 近山可能保持不动或轻微移动
  text.style.marginRight = value * 4 + 'px'; // 文本向右移动
  text.style.marginTop = value * 1.5 + 'px'; // 文本向下移动
  btn.style.marginTop = value * 1.5 + 'px';   // 按钮向下移动
});

<section>
  <img src="img/stars.png" id="stars">
  <img src="img/moon.png" id="moon">
  <img src="img/mountains_behind.png" id="mountain-behind">
  <h2 id="text">Genesis 2k22</h2>
  <a href="#sec" id="btn" class="btn">Register Now</a>
  <img src="img/mountains_front.png" id="mountain-front">
</section>

body,
html {
  height: 1000px; /* 确保页面有足够的滚动空间来触发视差效果 */
  margin: 0;      /* 移除浏览器默认边距 */
  padding: 0;     /* 移除浏览器默认内边距 */
  overflow-x: hidden; /* 防止水平滚动条 */
}

section {
  position: relative; /* 容器相对定位，子元素绝对定位的参照 */
  width: 100%;
  height: 100vh;      /* 初始视图高度，确保内容充满屏幕 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* 隐藏超出部分，尤其是图片移动时 */
}

section img,
section h2,
section a {
  position: absolute; /* 使元素可以脱离文档流，进行自由定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持比例 */
  pointer-events: none; /* 允许点击穿透下层元素 */
  z-index: 1; /* 默认层级 */
}

/* 调整特定元素的层级和样式，使其位于前景 */
#text {
  position: relative; /* 文本通常需要更高的层级和相对定位 */
  color: #fff;
  font-size: 5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 9; /* 确保文本在图片之上 */
}

#btn {
  position: relative; /* 按钮也需要更高的层级 */
  padding: 8px 30px;
  background: #fff;
  border-radius: 40px;
  text-decoration: none;
  color: #262626;
  font-size: 1.2em;
  z-index: 9; /* 确保按钮在图片之上 */
}

/* 根据需要调整不同图片的层级，以创建景深效果 */
#stars { z-index: 1; }
#moon { z-index: 2; }
#mountain-behind { z-index: 3; }
#mountain-front { z-index: 4; } /* 最前景的元素 */