如何用JS创建fixed header（非sticky header），使滚动内容从其后方穿过

看起来你已经用了position: fixed来实现顶部固定，但这类需求常遇到两个典型问题：页面内容一开始就被Header挡住，或者滚动时内容跑到Header上方覆盖它。下面给你针对性的解决方案：

核心代码实现 #

HTML结构 #

<!-- 你的固定Header -->
<div class="myHeader">My Header</div>

<!-- 你的滚动内容区 -->
<div class="page-content">
  <!-- 这里放置你所有的页面内容 -->
  <p>测试内容1：滚动看看Header的固定效果...</p>
  <p>测试内容2：更多滚动内容...</p>
  <!-- 可重复添加多段内容方便测试滚动 -->
</div>

CSS样式 #

.myHeader {
  position: fixed;
  top: 0; /* 强制固定在视口最顶部 */
  left: 0;
  width: 100%; /* 固定定位元素不会自动继承父宽度，需手动设置占满全屏 */
  background-color: #ffffff; /* 必须添加背景色，避免后面的内容透过Header显示 */
  z-index: 999; /* 提高层级，确保Header始终在内容上方 */
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影增强视觉区分 */
}

.page-content {
  margin-top: 60px; /* 数值等于Header的实际高度（含padding/border），避免内容被Header遮挡 */
  padding: 1rem;
}

关键要点解释 #

• top: 0 + left: 0：明确固定Header的位置，避免默认定位偏差
• width: 100%：固定定位元素脱离文档流，不会自动占满父容器宽度，必须手动设置
• background-color：如果省略这一项，滚动的内容会透过Header显示，这大概率是你遇到的问题之一
• z-index: 999：确保Header的层级高于页面其他内容，防止被滚动元素覆盖
• .page-content的margin-top：因为fixed元素脱离文档流，内容区会默认从页面顶部开始，所以需要用顶部外边距避开Header的高度

如果你的Header高度不固定（比如响应式场景），可以用JavaScript动态计算Header高度再设置内容区的margin-top，但静态场景下上面的CSS方案完全够用。

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