如何消除滚动时固定侧边栏（fixed sidebar）顶部的空白

嘿，这个问题我之前做项目时也踩过坑！先帮你捋清楚问题根源：你的侧边栏用了position: fixed，它是相对于浏览器视口定位的。如果你的header是普通文档流（没加fixed定位），未滚动时header占着顶部空间，侧边栏的top值可能设成了和header高度一致，所以看起来刚好在header下方；但页面滚动后，header被滚出视口，侧边栏还是保持原来的top值，顶部自然就空出一块了。下面给你详细讲两种方案的实现方式：

方案一：用z-index让侧边栏在未滚动时藏在header下方 #

这个思路很直接——让侧边栏始终贴紧视口顶部（top: 0），但未滚动时让header的层级比侧边栏高，盖住侧边栏的顶部区域；等页面滚动、header滚出视口后，侧边栏就自动顶到顶部，不会留空白。

具体实现步骤：

• 给header加position: relative（静态元素没法设置z-index），再设置一个比侧边栏高的z-index值，同时给header加上背景色（不然侧边栏会透过header露出来）
• 侧边栏保持position: fixed，把top设为0，z-index设得比header低

代码示例：

.header {
  position: relative;
  z-index: 10; /* 数值比侧边栏高即可 */
  height: 60px; /* 替换成你实际的header高度 */
  background: #ffffff; /* 必须有背景色才能盖住下方的侧边栏 */
}

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 200px;
  height: 100vh;
  background: #f5f5f5;
}

这个方案的优势是简单粗暴，不需要复杂的动画，适合header不需要固定在顶部的场景。

方案二：用CSS滚动驱动动画动态调整侧边栏top值 #

如果你想要更平滑的过渡效果，或者header高度是动态的，那可以用CSS的滚动驱动动画来根据滚动距离自动调整侧边栏的top值。

具体实现步骤：

• 定义一个动画，让侧边栏的top值从header高度平滑过渡到0
• 把这个动画绑定到页面的滚动事件，设置触发范围为“从滚动0到滚动header高度”

代码示例：

/* 定义滚动驱动动画：根据滚动进度调整侧边栏top值 */
@keyframes adjustSidenavTop {
  /* 滚动距离小于header高度时，侧边栏保持在header下方 */
  0% {
    top: 60px; /* 替换成你实际的header高度 */
  }
  /* 滚动距离超过header高度后，侧边栏贴紧视口顶部 */
  100% {
    top: 0;
  }
}

.sidenav {
  position: fixed;
  left: 0;
  width: 200px;
  height: 100vh;
  background: #f5f5f5;
  /* 绑定动画到页面滚动 */
  animation: adjustSidenavTop linear;
  animation-timeline: scroll(root block);
  animation-range: 0 60px; /* 滚动范围：0到header高度 */
}

.header {
  height: 60px;
  background: #ffffff;
}

这个方案的好处是过渡非常自然，用户滚动页面时侧边栏会跟着平滑移动到顶部，体验更好。

额外补充：如果你的header是固定在顶部的 #

如果你的header本身就是position: fixed（始终停在视口顶部），那根本不需要上面的复杂操作——直接把侧边栏的top值设为header的高度，再把侧边栏的高度减去header高度，就能让它始终贴在header下方，滚动时也不会有空白：

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 60px;
  background: #ffffff;
}

.sidenav {
  position: fixed;
  top: 60px; /* 和header高度完全一致 */
  left: 0;
  width: 200px;
  height: calc(100vh - 60px); /* 高度减去header高度，避免超出视口 */
  background: #f5f5f5;
}

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