如何让position:sticky元素突破父容器限制实现页面顶部固定？

我正在制作一个着陆页，包含页头（header）、桌面端占满屏幕的大图、导航栏（navbar）三个元素，要求导航栏滚动到页面顶部后固定跟随页面滚动。

目前通过给父容器设置max-height: 100vh，确保三个元素在桌面端完美适配视口，但导航栏处于该父容器内时，position: sticky会在到达容器底部后停止固定，无法实现页面顶部固定的需求。

当前代码结构如下：

HTML代码 #

<div class="container-top">
  <header>
    <!--- ...header content... -->
  </header>

  <div>
    <img src="1080p_image.png">
  </div>

  <nav class="sticky-top">
    <!-- ...navbar content... -->
  </nav>
</div>

<div class="other-content">
    <!-- ...other content... -->
</div>

CSS代码 #

.container-top{
  max-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img{
  width: 100vw;
}

header{
  background-color: darkgray;
  height: 5rem;

  z-index: 1;
}

nav{
  background-color: darkgray;
  height: 5rem;

  z-index: 1;
}

.sticky-top{
  position: sticky;
  top: 0;
}

.other-content{
  height: 100rem;
}

解决方案 #

方法1：将导航栏移出父容器（推荐） #

position: sticky的生效范围仅限于其父容器，父容器设置了max-height: 100vh，导致导航栏滚动到容器底部就会停止固定。把导航栏从container-top中移出，放在other-content上方，就能让它基于整个视口实现固定效果。

修改后的HTML：

<div class="container-top">
  <header>
    <!--- ...header content... -->
  </header>

  <div>
    <img src="1080p_image.png">
  </div>
</div>

<nav class="sticky-top">
  <!-- ...navbar content... -->
</nav>

<div class="other-content">
    <!-- ...other content... -->
</div>

调整后的CSS（优化图片填充）：

.container-top{
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img{
  width: 100vw;
  object-fit: cover; /* 防止图片拉伸变形 */
  flex: 1; /* 让图片自动填充header之外的剩余视口空间 */
}

header{
  background-color: darkgray;
  height: 5rem;
  z-index: 1;
}

nav{
  background-color: darkgray;
  height: 5rem;
  z-index: 1;
}

.sticky-top{
  position: sticky;
  top: 0;
}

.other-content{
  height: 100rem;
}

方法2：移除父容器max-height（保留导航栏在容器内的备选方案） #

如果必须将导航栏留在父容器中，可移除container-top的max-height: 100vh，改用height: calc(100vh - 5rem)（5rem为导航栏高度），让header和图片占满剩余视口空间：

.container-top{
  /* 移除max-height */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 5rem); /* 减去导航栏高度 */
}

img{
  width: 100vw;
  object-fit: cover;
  flex: 1;
}

/* 其他样式保持不变 */

此方法需注意页面内容较少时的布局兼容性，优先推荐方法1。

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