怎样实现水平滚动时内外标题栏同步粘滞效果

当页面存在水平滚动内容时，需让主标题栏和内部标题栏均随滚动同步位移，避免右侧出现空白；通过为父容器设置 width: fit-content 并配合 position: sticky，可使嵌套的 inner-header 正确响应横向滚动。

当页面存在水平滚动内容时，需让主标题栏和内部标题栏均随滚动同步位移，避免右侧出现空白；通过为父容器设置 width: fit-content 并配合 position: sticky，可使嵌套的 inner-header 正确响应横向滚动。

在多层嵌套布局中（如外层 header + body，body 内再含 inner-header 和 inner-body），若 inner-body 因内容过宽触发水平滚动，仅对 inner-header 设置 position: sticky; left: 0 往往无效——这是因为 sticky 定位的“粘滞边界”依赖其包含块（containing block）的宽度。若父容器（如 .body）未显式定义宽度，浏览器默认按视口宽度计算，导致 sticky 元素无法感知内部内容的真实宽度，从而在滚动时“卡住”或留白。

✅ 正确解法是：让父容器（.body）的宽度由子内容撑开，而非受限于视口：

.body {  width: fit-content; /* 关键：使 .body 宽度匹配其内部最大内容宽度 */  overflow-x: auto;  white-space: nowrap; /* 防止文本换行，确保水平延展 */}.inner-header {  position: sticky;  left: 0;  background: #f0f0f0;  z-index: 10;}

同时确保 inner-header 与 inner-body 处于同一 flex 或 inline-block 上下文（无需额外包裹），且无 overflow: hidden 等截断样式干扰。

⚠️ 注意事项：

• fit-content 在现代浏览器中兼容良好（Chrome 69+、Firefox 63+、Safari 14.1+），如需支持旧版 Safari，可降级使用 display: inline-block; width: -moz-max-content; width: max-content;；
• 不要对 .body 设置 width: 100% 或 width: 100vw，这会覆盖 fit-content 效果；
• 若 inner-body 包含弹性布局（flex/grid），需确保子项不被压缩（如添加 flex-shrink: 0 或 min-width: 0 控制溢出行为）；
• sticky 元素必须有明确的非 auto 的 left/right 值，且其祖先元素不能有 overflow: hidden/auto（除非该祖先就是滚动容器本身）。

最终效果：当用户横向滚动 inner-body 时，主 header 与 inner-header 将同步向左平移，始终覆盖对应列区域，消除右侧错位空白，实现真正一致的粘滞体验。