通过 javascript 监听滚动事件，动态调整容器高度与图片定位，使项目区域在滚动过程中实现“图片上滑隐藏、仅留标题”的视觉效果，无需第三方库即可完成。
通过 javascript 监听滚动事件，动态调整容器高度与图片定位，使项目区域在滚动过程中实现“图片上滑隐藏、仅留标题”的视觉效果，无需第三方库即可完成。
要实现类似 Sophie Westfall 网站 Projects 区域 的滚动折叠效果（即：初始显示完整项目图+标题 → 滚动时图片向上滑出可视区 → 最终仅保留固定高度的标题栏），核心在于基于滚动位置动态控制元素尺寸与定位，而非简单地“固定吸附”。原答案中提到的 position: fixed 仅适用于顶部吸顶场景，无法满足本需求中“容器高度渐变收缩 + 图片自然上移隐藏”的交互动效。
✅ 正确实现思路如下：
- 结构分层：每个 .projectscontainer 内部需明确分离 <img> 和 <header>（标题区域），并用 overflow: hidden 限制容器裁剪；
-
CSS 预设关键样式：
.projectscontainer { position: relative; border: solid 2px #593832; width: 988px; height: 498px; /* 初始全高 */ overflow: hidden; transition: height 0.3s ease-out; }
.projectscontainer img { width: 100%; height: auto; display: block; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.projectscontainer h2 { margin: 0; padding: 16px; height: 91px; background: white; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; }
3. **JavaScript 动态控制**（推荐使用 `IntersectionObserver` 提升性能）：
```javascript
const containers = document.querySelectorAll('.projectscontainer');
const headerHeight = 91;
containers.forEach(container => {
const img = container.querySelector('img');
const observer = new IntersectionObserver(
([entry]) => {
const { boundingClientRect, intersectionRect } = entry;
const scrollProgress = 1 - (intersectionRect.top - boundingClientRect.top) /
(boundingClientRect.height - headerHeight);
// 限制在 [0, 1] 范围内
const clamp = Math.max(0, Math.min(1, scrollProgress));
// 动态缩放高度 & 上移图片
container.style.height = `${headerHeight + (498 - headerHeight) * (1 - clamp)}px`;
img.style.transform = `translateY(${- (498 - headerHeight) * clamp}px)`;
},
{ threshold: [0, 0.1, 0.3, 0.5, 0.7, 0.9, 1] }
);
observer.observe(container);
});⚠️ 注意事项：
- 避免直接监听 scroll 事件（易触发高频重绘，影响性能）；
- 使用 IntersectionObserver 可精准感知元素进入/离开视口的过程，并支持平滑插值；
- 图片 transform: translateY() 比修改 top 更高效（利用 GPU 加速）；
- 若需兼容旧浏览器，可降级为 requestAnimationFrame + getBoundingClientRect() 方案；
- 所有尺寸值（如 498px、91px）建议提取为 CSS 自定义属性或 JS 常量，便于维护。
最终效果：用户滚动时，每个项目区块会随视口位置线性收缩高度，图片同步上滑被裁剪，直至仅显示 91px 高的标题栏——简洁、流畅、专业，且完全可控。
