CSS实现固定顶部导航栏不被滚动内容遮挡及锚点跳转

需求1：保证导航栏不被滚动内容遮挡 #

你之前想的给滚动到导航位置的内容设置opacity，让内容视觉上消失的思路是绕远路，核心解法是明确导航的固定定位与最高层级，所有逻辑不需要任何JavaScript，最终的遮挡效果和你预期的一致：

• 给导航栏设置固定定位，钉在页面顶部：

  header nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: red;
    /* 关键属性：把导航层级拉到最高，压过所有滚动的文本、图片、视频内容 */
    z-index: 999;
  }
  

  只要z-index值高于所有内容容器，不管内容怎么滚动到导航的位置，都会自然处在导航下层，被红色的不透明导航栏挡住，完全不会遮挡导航里的可点击链接，比逐段监控滚动位置调整内容透明度的维护成本低太多。
• 补个适配细节：因为固定定位的元素会脱离正常文档流，会把后面的页面内容顶到页面最顶端，刚好被导航挡住，所以需要给页面主体补上和导航等高的顶部内边距：

  body {
    padding-top: 100px;
  }
  

需求2：导航栏点击跳转至页面对应区块 #

你现有的锚点链接写法（href="#section1"）逻辑完全正确，只要配合两个CSS属性，就能实现顺滑无JS的跳转效果：

• 给全局HTML设置平滑滚动，点链接时不会生硬跳转到目标位置：

  html {
    scroll-behavior: smooth;
  }
  

• 因为导航是固定在顶部的，默认锚点跳转后会把目标区块顶到页面最顶端，刚好被100px高的导航挡住，需要给滚动逻辑补上固定导航的高度偏移：

  html {
    /* 锚点跳转后，自动在目标区块上方留出100px的空隙，避开导航遮挡 */
    scroll-padding-top: 100px;
  }
  

• 最后只需要给每个导航链接指向的内容容器加上对应id即可，比如导航里指向#section2的区块，就给对应的div加上id="section2"属性，点击导航链接就会精准跳转到对应位置。

可直接复用的完整CSS片段 #

/* 全局样式初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  padding-top: 100px;
}
/* 导航栏样式 */
header nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: red;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}
header nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}
/* 内容区块通用样式 */
.task, #section1, #section2, #section3 {
  min-height: 80vh;
  padding: 2rem;
}

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