通过 javascript 监听滚动事件，动态调整容器高度与定位方式，使图片区域随滚动逐步上移并隐藏，最终仅保留标题栏，实现类似作品集页面的视差折叠效果。
通过 javascript 监听滚动事件，动态调整容器高度与定位方式，使图片区域随滚动逐步上移并隐藏，最终仅保留标题栏，实现类似作品集页面的视差折叠效果。
要实现“滚动时图片向上收起、仅留标题”的折叠效果（如 Sophie Westfall 项目页 所示），核心不是单纯改变 height，而是结合 position: sticky（推荐）或 position: fixed + 动态高度计算，配合滚动监听实现视觉上的“渐隐收缩”。你当前的思路（直接切换固定 height 值）在视觉上会显得生硬且无法响应连续滚动；更自然的方案是让图片区域随滚动进度线性缩放/位移，或利用 CSS sticky 实现平滑吸附过渡。
✅ 推荐方案：使用 position: sticky + top: 0（纯 CSS，性能佳，无需 JS）
这是最简洁、高效且符合现代浏览器标准的方式。只需为 .projectscontainer 内的图片区域设置 sticky 定位，当容器滚动至视口顶部时，图片将“粘住”并随继续滚动逐渐脱离可视区，标题则始终可见。
.projectscontainer {
border: solid 2px #593832;
width: 988px;
/* 不设固定 height —— 让内容决定初始高度 */
position: relative;
}
/* 图片区域（假设结构为 .projectscontainer > .image-wrapper） */
.projectscontainer .image-wrapper {
height: 407px; /* = 498px - 91px，即图片部分高度 */
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* 标题区域（保持始终可见） */
.projectscontainer h2 {
margin: 0;
height: 91px;
line-height: 91px;
background: #fff;
}
? HTML 结构建议（确保语义清晰）：
<div class="projectscontainer">
<div class="image-wrapper">
<img src="project1.jpg" alt="Project 1" style="max-width:90%">
</div>
<h2>Project Title</h2>
</div>
⚠️ 注意事项：
- position: sticky 要求父容器不能有 overflow: hidden 或 transform 等创建新层叠上下文的属性，否则会失效；
- 若需兼容 IE（已不推荐），才需降级为 JavaScript 方案：监听 scroll 事件，根据 element.getBoundingClientRect().top 判断位置，动态添加 .collapsed 类并切换 height 和 position: fixed；
- 避免对多个 .projectscontainer 同时应用 position: fixed，易引发布局错乱——sticky 天然支持多实例独立行为。
? 进阶提示（平滑过渡）：
为提升体验，可添加 CSS 过渡：
.image-wrapper {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.projectscontainer.stuck .image-wrapper {
transform: translateY(-100%);
}
再配合 JS 在 scroll 中判断是否“已吸附”，添加 .stuck 类控制动画。
总结：优先采用 position: sticky 实现优雅、高性能的折叠效果；仅在特殊交互需求下引入 JavaScript 控制。这既降低维护成本，又保障移动端流畅性与可访问性。
