如何用HTML+CSS+JS实现无额外元素的简易滚动视差效果？

需求与现有基础 #

• 目标：给<body>的固定背景图添加简易滚动视差效果
• 约束：不新增HTML元素、不使用任何第三方库
• 现有配置：
  • <body>已设置固定背景图，配置background-size: cover
  • <body>直接子元素中，仅<header>无背景色（作为背景图的展示窗口），其余子元素（如<main>/<footer>）均有背景色
  • 必须保留顶部position: sticky栏（因使用background-size: cover，此栏可避免背景图滚动错位）

核心实现思路 #

利用<body>背景的background-attachment: fixed特性，通过原生JS监听页面滚动事件，动态调整<body>的background-position值，让背景图的滚动速度慢于页面内容，从而产生视差效果。

完整代码实现 #

HTML（无需修改现有结构） #

<body>
  <nav style='background: white;height:160px;position:sticky;top:0px;'></nav>
  <header id='see_through'>This works as the "window" for body background picture</header>
  <main style='background: white;'>
    <!-- 填充足够高度的内容，方便测试滚动效果 -->
    <div style="height: 1200px;"></div>
  </main>
  <footer style='background: white;'></footer>
</body>

CSS（基于现有代码补充） #

body {
  background:url('header-background.jpg');
  background-position:center bottom;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  margin: 0; /* 消除默认边距，避免滚动时出现空白 */
}

#see_through {
  min-height: 400px; /* 给header设置足够高度，确保能看到背景图 */
}

原生JS（实现视差逻辑） #

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动距离
  const scrollY = window.pageYOffset || document.documentElement.scrollTop;
  // 调整背景图的垂直位置，系数0.5可自定义（数值越小，视差效果越明显）
  document.body.style.backgroundPositionY = `${scrollY * 0.5}px`;
});

关键注意事项 #

• 顶部position: sticky栏必须保留，否则background-size: cover会在滚动时导致背景图显示异常
• <header>必须保持无背景色，才能正常透出<body>的背景图
• 视差速度可通过调整JS中的系数（示例为0.5）控制：系数小于1时，背景滚动慢于页面，产生视差；系数等于1时，背景与页面同步滚动，无效果；系数大于1时，背景滚动快于页面，反向视差

内容的提问来源于stack exchange，提问作者Artis Zel