用 position: sticky 实现导航栏滚动吸附，需设 top 值、避免父容器 overflow/transform 干扰；宽表格下需 JS 同步宽度；内容区应独立滚动，避免 body 滚动干扰，且注意移动端 vh 缩放问题。
横向导航栏在页面滚动时保持固定、不随内容一起滚动，本质是定位方式与容器高度控制的组合问题。关键不在“怎么写”，而在“为什么滚动条出现在错的位置”以及“为什么导航栏宽度卡死在视口宽度”。
用 position: sticky 实现滚动吸附而非强制固定
多数人一上来就写 position: fixed，结果发现导航栏脱离文档流后，下方内容直接顶到顶部，还要手动加 margin-top 补位，且无法响应父容器变化。而 position: sticky 是更自然的选择——它在滚动前保持文档流位置，滚动到临界点（如 top: 0）才“吸住”顶部。
-
sticky必须有明确的top（或bottom）值才能生效，只写position: sticky不起作用 - 其父容器不能有
overflow: hidden、overflow: auto或transform，否则 sticky 行为被禁用 - 若导航栏本身高度不固定（比如文字换行、图标尺寸浮动），
top值建议用像素而非rem，避免计算偏差 - 在 Safari 15.4 之前版本中，
sticky对flex子项的支持不稳定，可临时改用display: block父容器
横向超宽表格下导航栏错位：宽度必须同步渲染尺寸
当导航栏下方是横向滚动的宽表格（如后台数据表），position: sticky 或 fixed 的默认宽度是 100vw，但表格实际宽度可能达 2500px。横向滚动时，导航栏就“断”在视口右边缘，和表格内容脱节。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- CSS 无法让 sticky 元素自动继承兄弟容器的运行时宽度，这是布局模型限制，不是写法错误
- 必须用 JavaScript 获取表格容器的
getComputedStyle(element).width，而不是offsetWidth（后者不含 padding 和 border） - 同步时机很重要：仅靠
load事件不够，表格数据可能是异步渲染的，需监听MutationObserver或框架的updated钩子 - 赋值时用
navbar.style.width = tableWidth即可，无需加!important；若无效，检查 navbar 是否被其他 CSS 规则用max-width截断
body 滚动条干扰导航栏：分离滚动上下文
常见错误是给 body 或整个 div#app 设置 overflow: auto，导致滚动条覆盖导航栏底部，或导航栏随 body 一起滚动。正确做法是让导航栏脱离滚动容器，内容区独立滚动。
立即学习“前端免费学习笔记（深入）”；
- 把
html和body设为height: 100vh; margin: 0;，清除所有默认边距干扰 - 导航栏用
position: sticky; top: 0; z-index: 1000;，不设 height，由内容撑高 - 内容区用
height: calc(100vh - [navbar-height]px); overflow-y: auto;，其中[navbar-height]px必须是精确像素值（如64px），不能用em或百分比 - 如果内容区内部还有横向滚动容器（如
.table-container），需额外加overflow-x: auto，且确保其white-space: nowrap生效
最易被忽略的一点：移动端 viewport 缩放会改变 vh 计算结果，导致 calc(100vh - 64px) 在双击缩放后出现空白或溢出。上线前务必在 iOS Safari 中真机测试缩放行为，必要时改用 JavaScript 动态设置内容区高度。
