通过监听滚动事件并动态调整元素高度与定位，可让项目容器中的图片随滚动逐渐上移隐藏，仅保留标题区域，营造出优雅的折叠动画效果。
通过监听滚动事件并动态调整元素高度与定位，可让项目容器中的图片随滚动逐渐上移隐藏，仅保留标题区域，营造出优雅的折叠动画效果。
要实现类似 Sophie Westfall 网站 Projects 区域 的“滚动折叠”效果（即图片随页面滚动向上收起、最终仅显示标题），核心思路并非简单地切换 height，而是利用 滚动驱动的 CSS 变换（transform） + sticky 定位 + 高度动态收缩 实现平滑、高性能的视觉折叠。
✅ 推荐实现方案：CSS position: sticky + transform: translateY()（无需 JS 即可完成）
虽然 Stack Overflow 提到的 position: fixed 是一种基础粘性方案，但本场景更推荐 纯 CSS 的 sticky + transform 方案 —— 更简洁、无重排、性能更优，且天然支持平滑过渡。
✅ HTML 结构（保持语义清晰）
<div class="projectscontainer">
<div class="projects-img-wrapper">
<img src="project1.jpg" alt="Project 1" class="project-img">
</div>
<h3 class="project-title">Project Title</h3>
</div>
✅ 关键 CSS（含过渡与响应式适配）
.projectscontainer {
position: relative;
width: 988px;
height: 498px;
border: 2px solid #593832;
overflow: hidden;
margin: 2rem auto;
}
.projects-img-wrapper {
height: 407px; /* = 498px - 91px (title height) */
position: sticky;
top: 0;
transition: transform 0.3s ease-out;
}
.project-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.project-title {
margin: 0;
padding: 0.8rem 1.5rem;
height: 91px;
line-height: 91px;
font-size: 1.5rem;
background: white;
position: relative;
z-index: 2;
}
✅ 进阶：添加滚动感知折叠动画（可选 JavaScript 增强）
若需更精细控制（如完全隐藏图片后触发标题高亮），可配合 IntersectionObserver 实现：
document.querySelectorAll('.projectscontainer').forEach(container => {
const imgWrapper = container.querySelector('.projects-img-wrapper');
const title = container.querySelector('.project-title');
const observer = new IntersectionObserver(
([entry]) => {
const progress = Math.min(1, Math.max(0, 1 - entry.intersectionRatio));
imgWrapper.style.transform = `translateY(-${progress * 407}px)`; // 407px = collapse distance
if (progress >= 0.99) {
container.style.height = '91px';
} else {
container.style.height = `${498 - progress * 407}px`;
}
},
{ threshold: [0, 0.25, 0.5, 0.75, 1] }
);
observer.observe(container);
});
⚠️ 注意事项：
- 避免直接修改 height 触发重排；优先使用 transform 和 opacity 实现动画；
- .projects-img-wrapper 必须设为 sticky 并指定 top: 0，才能随容器滚动自然“吸附”并产生折叠感；
- 所有尺寸（如 498px / 91px）建议转为 rem 或 vh 提升响应性；
- 在 CodePen 中测试时，请确保 有足够高度供滚动（添加多个 .projectscontainer 或 min-height: 200vh）。
该方案兼顾新手友好性与专业表现力——无需复杂 JS 就能达成原网站效果，同时为后续交互扩展留足空间。
