如何用纯CSS实现滚动时单区块滑动露出固定区块的窗帘效果？

需求：两个高度、宽度完全一致的区块，初始状态下第一个区块覆盖第二个区块；滚动页面时，第一个区块随滚动像窗帘一样滑开，露出始终固定不动的第二个区块，仅用CSS实现且不修改透明度。

实现思路 #

• 将第二个区块设置为固定定位，使其始终固定在视口对应位置，不随页面滚动移动
• 第一个区块保留在正常文档流中，通过层级设置确保初始时覆盖在固定区块上方
• 给页面设置足够的滚动高度，触发滚动行为时，第一个区块随文档流向上移动，逐渐露出下方固定的区块

完整代码实现 #

HTML结构

<div class="parent__first"></div>
<div class="parent__second"></div>

CSS代码

/* 重置默认样式，保证布局正常 */
body {
  margin: 0;
  min-height: 200vh; /* 设置足够的页面高度，让用户可以滚动 */
}

.parent__first {
  width: 100%;
  height: 700px;
  background: lightblue;
  position: relative;
  z-index: 1; /* 确保第一个区块在视觉层级上覆盖第二个 */
}

.parent__second {
  width: 100%;
  height: 700px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* 固定区块处于下层 */
}

效果说明 #

初始状态下，浅蓝色的第一个区块完全覆盖在灰色的固定区块上方。当向下滚动页面时，第一个区块会随着文档流向上移动，逐步离开视口区域，下方固定的灰色区块会逐渐完整露出，实现类似窗帘滑开的效果。

内容的提问来源于stack exchange，提问作者stanislav kim