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

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

通过监听滚动事件并动态调整元素高度与定位，可让项目容器在滚动过程中平滑收缩，最终仅保留标题区域，营造出图片“向上滑出”的视觉效果。

通过监听滚动事件并动态调整元素高度与定位，可让项目容器在滚动过程中平滑收缩，最终仅保留标题区域，营造出图片“向上滑出”的视觉效果。

要实现类似 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，即可在保持布局稳定的前提下，实现专业级的滚动折叠体验。