滚动驱动固定是CSS新标准，原生支持滚动进度控制位置，仅Chromium 115+稳定支持；position: sticky可实现兼容性更好的“伪滚动固定”；真滚动驱动需scroll-timeline与animation-timeline配合，JS方案须用requestAnimationFrame防抖。

滚动驱动固定（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 绑定行为。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 目前仅 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); }
  }

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 里跑得通。