内容水平溢出时双Header跟随滚动的粘性布局实现问题

核心思路 #

让内层Header的粘性定位基于内层滚动容器生效，而非全局窗口，这样滚动内层Body时，内层Header会跟随滚动填充右侧空白。

具体实现步骤 #

• 给包含内层Header和Body的父容器添加样式：

  .inner-container {
    overflow-x: auto;
  }
  

• 给内层Header设置粘性定位及背景色（避免滚动时被下层内容穿透）：

  .inner-header {
    position: sticky;
    left: 0;
    background-color: #ffffff; /* 与主Header背景保持一致或按需调整 */
    z-index: 1; /* 确保Header在内容上方 */
  }
  

• 确保内层Body的宽度足够触发水平滚动，比如：

  .inner-body {
    width: max-content; /* 或设置固定宽度如1200px，超过容器宽度即可 */
  }
  

原理说明 #

主Header的position: sticky; left: 0;基于全局窗口滚动生效，而内层Header需要绑定到内层滚动容器的滚动上下文。通过给内层容器设置overflow-x: auto;，使其成为滚动容器，内层Header的粘性定位就会基于这个容器的滚动状态触发，从而跟随滚动填充右侧空白。

内容的提问来源于stack exchange，提问作者Frimlik