如何实现滚动时新div覆盖旧div并添加白屏过渡且内容不上移？

核心需求复盘 #

滚动时旧内容固定在视口不向上移动，通过白色遮罩层逐渐覆盖（白屏淡出），新内容直接接管视口区域，而非常规的滚动替换。

你之前效果不理想的常见原因 #

1. 定位逻辑错误 #

多数自动生成的代码会默认使用position: relative或让内容随滚动流走，没有给旧内容容器设置position: fixed，导致旧内容随滚动上移，完全偏离需求。

2. 白屏淡出的实现方式错误 #

很多人直接给旧内容加opacity动画，但白屏淡出的核心是在旧内容上方叠加白色遮罩层，通过遮罩层的透明度变化实现“白屏覆盖”，而非让内容本身变透明。你可能没加这个遮罩层，或者直接对内容做了透明度动画。

3. GSAP使用不当 #

如果用了GSAP但没搭配ScrollTrigger插件，而是自己写原生滚动监听，会出现动画与滚动进度不同步、卡顿的问题。另外，触发动画的阈值（比如滚动到哪个位置开始动画）设置错误，也会导致效果偏离预期。

4. 新内容容器的布局错误 #

新内容容器没有设置足够的高度或正确的位置，导致滚动时无法触发动画，或者新内容和旧内容提前重叠，破坏效果。

可行的实现代码（适合新手） #

HTML结构 #

<!-- 旧内容区域：固定在视口 -->
<div class="section section-old">
  <div class="content">旧内容展示区</div>
  <!-- 白屏遮罩层：默认透明 -->
  <div class="white-overlay"></div>
</div>

<!-- 新内容区域：放在旧内容下方，需要足够高度让用户滚动 -->
<div class="section section-new">
  <div class="content">新内容展示区</div>
</div>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 旧内容容器：固定占满整个视口 */
.section-old {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* 确保在新内容上方 */
}

/* 白屏遮罩：覆盖在旧内容上，默认透明 */
.white-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none; /* 不影响旧内容的交互 */
}

/* 新内容容器：刚好在旧内容下方，高度占满屏幕 */
.section-new {
  position: relative;
  top: 100vh;
  width: 100%;
  min-height: 100vh;
  background: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5; /* 低于旧内容，滚动时逐渐接管 */
}

JS逻辑（使用GSAP ScrollTrigger） #

// 先引入GSAP和ScrollTrigger（可通过CDN）
// <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger);

// 白屏遮罩动画：跟随滚动进度从透明到不透明
gsap.to(".white-overlay", {
  opacity: 1,
  duration: 0.8,
  ease: "power2.inOut",
  scrollTrigger: {
    trigger: ".section-new", // 触发元素为新内容区域
    start: "top 50%", // 新内容顶部到达视口50%位置时开始动画
    end: "top 0%", // 新内容顶部到达视口顶部时结束动画
    scrub: true, // 动画与滚动进度同步
    toggleActions: "play none none reverse" // 滚动返回时反转动画
  }
});

// 同步旧内容的透明度降低动画
gsap.to(".section-old .content", {
  opacity: 0,
  duration: 0.8,
  ease: "power2.inOut",
  scrollTrigger: {
    trigger: ".section-new",
    start: "top 50%",
    end: "top 0%",
    scrub: true,
    toggleActions: "play none none reverse"
  }
});

调试建议 #

• 检查旧内容容器的position是否为fixed，确保它不会随滚动移动；
• 确认白色遮罩层的层级是否正确，需覆盖在旧内容之上；
• 调整ScrollTrigger的start和end值，找到最适合的动画触发时机；
• 如果动画卡顿，确认已引入ScrollTrigger，它会自动优化滚动事件的性能。

内容的提问来源于stack exchange，提问作者krishnal panara