如何实现滚动时图片自动收缩隐藏的视差效果-js教程-PHP中文网

如何实现滚动时图片自动收缩隐藏的视差效果

通过 javascript 监听滚动事件，动态调整容器高度与图片定位，使项目区域在滚动过程中实现“图片上滑隐藏、仅留标题”的视觉效果，无需第三方库即可完成。

通过 javascript 监听滚动事件，动态调整容器高度与图片定位，使项目区域在滚动过程中实现“图片上滑隐藏、仅留标题”的视觉效果，无需第三方库即可完成。

要实现类似 Sophie Westfall 网站 Projects 区域的滚动折叠效果（即：初始显示完整项目图+标题 → 滚动时图片向上滑出可视区 → 最终仅保留固定高度的标题栏），核心在于基于滚动位置动态控制元素尺寸与定位，而非简单地“固定吸附”。原答案中提到的 position: fixed 仅适用于顶部吸顶场景，无法满足本需求中“容器高度渐变收缩 + 图片自然上移隐藏”的交互动效。

✅ 正确实现思路如下：

堆友Agent

堆友Agent是一款AI图像与设计工具，集成大厂专家设计 Skill 的AI设计智能体。

下载

结构分层：每个 .projectscontainer 内部需明确分离和
（标题区域），并用 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);
});

⚠️ 注意事项：