如何让粘性侧边导航在所有section中生效且无布局空白？

1. 重构HTML结构 #

把侧边导航从section内部抽出来，作为<body>的直接子元素，和内容区域容器同级，这样导航的粘性范围就不受单个section限制，而是覆盖整个页面：

<body>
  <!-- 独立的粘性侧边导航 -->
  <nav class="side-nav">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
  </nav>

  <!-- 所有section的统一容器 -->
  <div class="content-wrapper">
    <section id="section1">
      <h2>Section 1 Content</h2>
      <!-- 此处为section内容 -->
    </section>
    <section id="section2">
      <h2>Section 2 Content</h2>
      <!-- 此处为section内容 -->
    </section>
    <section id="section3">
      <h2>Section 3 Content</h2>
      <!-- 此处为section内容 -->
    </section>
  </div>
</body>

2. 调整CSS实现全站粘性 #

通过position: sticky配合flex布局，既实现导航全程粘性，又解决首个section上方的空白问题：

/* 重置body默认边距，用flex布局让导航和内容横向排列 */
body {
  margin: 0;
  display: flex;
  min-height: 100vh;
}

/* 核心粘性导航样式 */
.side-nav {
  position: sticky;
  top: 0; /* 滚动到顶部位置时触发粘性效果 */
  width: 220px;
  background-color: #f5f5f5;
  padding: 1.5rem;
  height: fit-content; /* 导航高度自适应内容，不强制占满视口 */
}

/* 内容区域占满剩余页面宽度 */
.content-wrapper {
  flex: 1;
}

/* 给section设置最小高度，方便测试滚动粘性效果 */
section {
  padding: 2rem;
  min-height: 100vh;
}

关键问题说明 #

• 之前把导航放在section内部时，position: sticky的生效范围被限制在父section内，一旦滚动超出该section，导航就会跟着滚动离开视口。
• 直接把导航移到section前出现空白，是因为默认块级元素会独占一行，用flex布局让导航和内容区域横向排列，就能消除这个空白。
• height: fit-content确保导航只占用自身内容的高度，避免不必要的垂直空间浪费，同时保持稳定的粘性效果。

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