如何让元素在滚动时相对于容器固定而非视口固定？_技术教程

本文讲解如何通过 `position: sticky` 结合结构重构与 css 类控制，实现元素在特定容器内“相对固定”滚动行为——即在进入某区域时显现并缩放，随后随该区域一同滚动离开视口，避免 `position: fixed` 导致的全局视口锚定问题。

要实现“元素在 section two 中缩放后能随 section two 一起滚动离开”，关键在于放弃将元素置于 section one 内部并用 fixed 定位——因为 position: fixed 始终相对于视口（viewport），无法绑定到某个 section 的滚动流中。

正确的解法是：将需要动态行为的元素及其父容器从 section 结构中抽离，改为覆盖在多个 section 之上的独立层，并利用 position: sticky 配合 height: 200vh 的父容器，使其在跨越两个 fullpage section 时拥有自然的粘性滚动行为。

✅ 正确结构与核心原理

.parent 使用 position: absolute + height: 200vh，确保其垂直跨度涵盖前两个全屏 section；
.child 应用 position: sticky; top: 0，并在 height: 100vh 下形成「粘性滚动锚点」；
.child.expanded 通过 top: 100vh 将缩放后的元素视觉上“下移”至 section.two 区域中心，同时 transform: scale(1) 还原为原始尺寸（注意：此处 scale(1) 是为了视觉对齐，实际缩放逻辑由类切换驱动）；
初始 .child 设置 transform: scale(0.25)（即原始尺寸的 1/4），配合 opacity: 0 隐藏；滚动触发后通过 visible 和 expanded 类渐进控制显隐与形态。

?️ JavaScript 控制逻辑（简洁高效）

window.addEventListener('scroll', () => {
  const child = document.querySelector('.child');
  const scrollY = window.scrollY;
  const vh = window.innerHeight;

  // 滚动超过 0px → 显现
  child.classList.toggle('visible', scrollY > 0);
  // 滚动超过 ~70% 屏幕高度（即进入 section.two 中段）→ 扩展
  child.classList.toggle('expanded', scrollY > vh * 0.7);
});

✅ 使用 classList.toggle() 替代手动切换 className，避免样式覆盖冲突；用 vh * 0.7 替代硬编码像素值（如 729），提升响应式兼容性。

? 关键 CSS 解析

.parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200vh; /* 覆盖 section.one + section.two */
  z-index: 10;
}

.child {
  position: sticky;
  top: 0;
  height: 100vh;
  transform: scale(0.25); /* 初始缩小 */
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.child.visible {
  opacity: 1;
}

.child.expanded {
  top: 100vh;           /* “下沉”至 section.two 起始位置 */
  transform: scale(1);  /* 恢复原始尺寸（可替换为 scale(4) 实现放大） */
}

.content {
  position: absolute;
  inset: 30px;          /* 内边距居中内容 */
  background: plum;
}

⚠️ 注意：若需实现「放大 4 倍填满 section.two」，请将 .child.expanded 中的 transform: scale(1) 改为 transform: scale(4)，并确保 .content 的 inset 或宽高适配缩放后的布局空间。