滚动固定元素怎么实现【附代码】

本文深入解析了“滚动驱动固定”这一前沿CSS技术的三种实现路径：以兼容性见长的`position: sticky`作为实用“伪滚动固定”方案；原生、精准但仅Chromium 115+稳定支持的真滚动驱动定位（依赖`scroll-timeline`与`animation-timeline`）；以及需谨慎优化的JavaScript方案——强调用`requestAnimationFrame`防抖、避免布局抖动，并指出核心难点常被忽视：准确识别滚动容器（非body，而是可滚动的section或iframe）。无论你是追求渐进增强还是探索新标准，这篇文章都提供了即开即用的代码示例与关键避坑指南。

滚动驱动固定（scroll-driven positioning）不是靠 position: sticky 或 JavaScript 监听 scroll 事件实现的——它是 CSS 新标准，原生支持基于滚动进度控制元素位置，但目前仅 Chromium 115+（含 Edge、Chrome）稳定支持，Firefox 和 Safari 尚未启用。

用 position: sticky 实现“伪滚动固定”最稳妥

多数场景下所谓“滚动固定”，其实只是让元素在滚动到某区域时停住，直到父容器滚出视口。这完全可以用 position: sticky 解决，兼容性好（Chrome 56+、Firefox 59+、Safari 6.1+），且无需 JS。

• top 值决定粘性触发位置：比如 top: 20px 表示距离其最近定位祖先（或 viewport）顶部 20px 时开始固定
• 必须有明确的“包含块”：父容器不能是 overflow: hidden 或 transform 触发新层叠上下文，否则 sticky 失效
• 避免和 float、clear 同时使用，会直接禁用 sticky 行为
• 示例：

  .sidebar {
    position: sticky;
    top: 1rem;
    height: 200vh; /* 确保有足够滚动空间 */
  }

@starting-style 和 scroll-timeline 是真滚动驱动，但别急着用

真正由滚动进度驱动动画/定位（比如“滚动到 30% 时元素右移 100px”），需要 CSS Scroll-Driven Animations（CSSWG 标准草案）。它依赖两个关键部分：scroll-timeline 定义滚动范围，@starting-style 或 animation-timeline 绑定行为。

• 目前仅 Chrome 115+ 默认开启，需手动开启 flag（chrome://flags/#scroll-driven-animations）才能在旧版测试
• scroll-timeline 必须绑定到一个可滚动容器（如 main），不能是 body —— 因为 body 滚动不被视为“有效的滚动容器”
• 动画必须用 @keyframes + animation-timeline，不能直接在 style 里写 translate 进度值；CSS 自定义属性（--x）也无法被 timeline 驱动，只能靠动画间接影响
• 示例（仅 Chrome 115+）：

  main {
    scroll-timeline: --vertical main y;
  }
  <p>.sticky-box {
  animation: slideIn 1 linear;
  animation-timeline: --vertical;
  }</p><p>@keyframes slideIn {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
  }</p>

JavaScript 方案要防抖，别直接绑 scroll

如果必须用 JS 控制（比如兼容老浏览器或做复杂逻辑），千万别在 scroll 事件里直接改 style.top 或 classList —— 会严重掉帧。

• 用 requestAnimationFrame 节流：只在下一帧执行位置计算，避免重复 layout
• 优先用 getBoundingClientRect() 判断元素是否进入/离开视口，比监听 window.scrollY 更可靠（尤其有 transform 或 scale 的页面）
• 避免在滚动中读取 offsetTop、clientHeight 等触发强制同步布局（layout thrashing）
• 简单防抖写法：

  let ticking = false;
  function updatePosition() {
    if (!ticking) {
      requestAnimationFrame(() => {
        // 计算并更新样式
        ticking = false;
      });
      ticking = true;
    }
  }
  window.addEventListener('scroll', updatePosition);

滚动驱动固定真正的复杂点不在写法，而在于“谁在滚动”——是 body？是某个 overflow-y: auto 的 section？还是嵌套的 iframe？不同滚动源对应不同的 API 使用方式和兼容策略，漏掉这一层判断，代码大概率只在 demo 里跑得通。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《滚动固定元素怎么实现【附代码】》文章吧，也可关注golang学习网公众号了解相关技术文章。