通过监听滚动事件并动态调整元素高度与定位，可让项目容器在滚动过程中平滑收缩，最终仅保留标题区域，营造出图片“向上滑出”的视觉效果。
通过监听滚动事件并动态调整元素高度与定位，可让项目容器在滚动过程中平滑收缩，最终仅保留标题区域，营造出图片“向上滑出”的视觉效果。
要实现类似 Sophie Westfall 网站 Projects 区域 的滚动折叠效果——即 .projectscontainer 在页面滚动时高度从 498px 逐步缩减至 91px（仅显示标题），核心思路并非简单“固定定位”，而是结合 position: sticky 与 CSS 高度过渡 + JavaScript 滚动监听，实现精准可控的折叠动画。
✅ 推荐方案（语义清晰、性能友好、无需复杂计算）：
使用 position: sticky 配合 top: 0，再通过 transform: translateY() 或 height 动态控制图片区域的可见性，辅以 transition 实现平滑收缩。
以下是完整实现步骤：
1. HTML 结构优化（确保语义化分层）
<div class="projectscontainer">
<div class="projects-img-wrapper">
<img src="project1.jpg" alt="Project thumbnail">
</div>
<div class="projects-header">
<h3>Project Title</h3>
</div>
</div>2. CSS 关键样式（启用粘性定位 + 过渡）
.projectscontainer {
position: relative;
width: 988px;
height: 498px;
border: solid 2px #593832;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动更自然 */
}
.projects-img-wrapper {
height: 407px; /* 498px - 91px = 图片区原始高度 */
overflow: hidden;
}
.projects-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.projects-header {
height: 91px;
background: white;
display: flex;
align-items: center;
padding: 0 24px;
}
/* 滚动中收缩状态：图片区域上移，同时容器高度减小 */
.projectscontainer.scrolled {
height: 91px;
}
.projectscontainer.scrolled .projects-img-wrapper {
transform: translateY(-407px); /* 完全隐藏图片 */
}3. JavaScript 监听滚动（轻量高效）
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.projectscontainer');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素进入视口时，允许后续滚动触发折叠
entry.target.classList.remove('scrolled');
} else {
// 元素完全离开视口顶部 → 触发折叠
const rect = entry.target.getBoundingClientRect();
const scrollTop = window.scrollY;
const topOffset = rect.top + scrollTop;
const triggerPoint = topOffset + 100; // 提前100px开始响应
if (scrollTop >= triggerPoint - 91) {
entry.target.classList.add('scrolled');
}
}
});
},
{ threshold: 0.05 } // 轻微进入即触发
);
containers.forEach(container => observer.observe(container));
});⚠️ 注意事项：
- 避免直接修改 height 同时设置 overflow: hidden —— 可能导致子元素被意外裁剪；推荐优先用 transform: translateY() 隐藏图片区域，主容器 height 保持 91px 固定，更稳定；
- 若需兼容旧浏览器，可用 position: fixed + top 手动计算，但会脱离文档流，影响布局；sticky 是现代标准首选；
- 性能敏感场景建议使用 requestAnimationFrame 替代高频 scroll 事件，但本例中 IntersectionObserver 已足够高效。
? 小结：该效果本质是「滚动驱动的状态切换」，而非纯 CSS 动画。通过 IntersectionObserver 精准感知容器位置，并配合 transform 与 transition，即可在保持布局稳定的前提下，实现专业级的滚动折叠体验。
