通过 css position: sticky 结合高度动态收缩，可让项目容器在滚动过程中平滑折叠图片区域，仅保留标题栏，无需复杂 javascript 即可实现类似 sophie westfall 网站的优雅视差收起效果。

通过 css position: sticky 结合高度动态收缩，可让项目容器在滚动过程中平滑折叠图片区域，仅保留标题栏，无需复杂 javascript 即可实现类似 sophie westfall 网站的优雅视差收起效果。

要实现“滚动时图片向上收起、仅留标题”的效果，核心在于利用 CSS 的 position: sticky 配合容器内部结构分层设计，而非依赖 JavaScript 监听滚动事件——这更轻量、性能更好，且兼容现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+）。

✅ 推荐实现方案：Sticky Header + 固定高度容器

将 .projectscontainer 设为相对定位容器，内部划分为两层：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• .project-image：作为可“收起”的图片区域（初始高度参与布局）；
• .project-header：设为 position: sticky; top: 0，使其在滚动时吸附顶部，并自然“推走”上方图片。

<div class="projectscontainer">
  <div class="project-image">
    <img src="project1.jpg" alt="Project 1">
  </div>
  <div class="project-header">
    <h3>Project Title</h3>
  </div>
</div>

.projectscontainer {
  border: solid 2px #593832;
  width: 988px;
  /* 总高度 = 图片高度 + 标题高度（例如 407px + 91px = 498px） */
  height: 498px;
  overflow: hidden;
}

.project-image {
  height: 407px; /* 可滚动收起的部分 */
  transition: transform 0.3s ease-out;
}

.project-header {
  height: 91px;
  position: sticky;
  top: 0;
  background: white; /* 避免文字穿透 */
  z-index: 10;
}

? 关键原理：当 .project-header 设置 position: sticky 且 top: 0 后，浏览器会在其父容器 .projectscontainer 的滚动范围内，将其“吸附”到顶部。随着用户向下滚动，.project-image 被持续向上位移（视觉上“收起”），直到完全脱离视口；此时 .projectscontainer 在视觉上仅显示 .project-header 的 91px 高度区域。

⚠️ 注意事项与优化建议

• 必须设置父容器 height 或 max-height：sticky 行为仅在有明确滚动上下文的容器内生效；若父元素未限制高度或未产生滚动，sticky 将不触发。
• 避免使用 transform: translateY() 手动控制：虽然 JS 方案可行（如监听 scroll + getBoundingClientRect()），但易引发重排重绘、卡顿，且需处理节流、兼容性等额外负担。
• 响应式适配：在移动端建议添加 @supports (position: sticky) 查询，对不支持的浏览器降级为静态布局：

  @supports not (position: sticky) {
    .project-header { position: relative; }
  }

• 无障碍友好：确保 .project-header 具备足够对比度与语义化标签（如 <h3>），并为图片添加 alt 属性。

该方案简洁、声明式、高性能，完美复现目标效果——无需一行 JavaScript，即可让每个 .projectscontainer 在滚动中优雅“折叠”，最终呈现干净利落的标题列表视图。