复刻滚动时顶部图片切换且页面静止效果，仅用CSS可行吗？

可以只用CSS实现你要的效果，先修正原代码的问题，再调整定位和布局逻辑：

原代码的核心问题 #

1. HTML语义错误：<ul>的直接子元素必须是<li>，不能用<div>
2. 所有sticky元素用相同top值，会导致堆叠显示或滚动时出现多余空白

修正后的实现方案 #

核心思路是给每个图片项设置与图片容器等高的占位高度，结合sticky定位让新图片在滚动到对应位置时顶掉旧图片，滚动完所有图片后恢复正常滚动：

<ul class="productions__list">
  <li class="productions__item">
    <div class="productions__img-wrap">
      <img src="https://picsum.photos/id/1015/1200/800" alt="Productions Poster" />
    </div>
  </li>
  <li class="productions__item">
    <div class="productions__img-wrap">
      <img src="https://picsum.photos/id/1016/1200/800" alt="Productions Poster" />
    </div>
  </li>
  <!-- 可添加更多图片项 -->
</ul>

<!-- 下方正常内容，用于测试滚动效果 -->
<div class="normal-content">
  <p>这里是正常滚动的内容...</p>
  <p>这里是正常滚动的内容...</p>
  <p>这里是正常滚动的内容...</p>
  <p>这里是正常滚动的内容...</p>
  <p>这里是正常滚动的内容...</p>
</div>

/* 重置默认样式 */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.productions__list {
  /* 整体容器高度匹配视口，作为滚动切换的触发基准 */
  height: 100vh;
  overflow: visible;
}

.productions__item {
  /* 每个图片项高度等于视口，确保滚动到下一项时刚好触发切换 */
  height: 100vh;
}

.productions__img-wrap {
  /* 粘在顶部，替换之前的图片容器 */
  position: sticky;
  top: 0;
  /* 图片容器占满视口高度，避免空白 */
  height: 100vh;
  width: 100%;
}

.productions__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.normal-content {
  padding: 2rem;
  background: #f5f5f5;
}

效果说明 #

• 滚动页面时，每滚动一个视口高度的距离，顶部图片就会向上切换成下一张
• 所有图片切换完成后，继续滚动会进入下方正常内容区域，不会出现多余空白
• 如果不需要全屏图片，只需统一修改.productions__list、.productions__item和.productions__img-wrap的高度值即可

内容的提问来源于stack exchange，提问作者Roger Veciana