React中CSS实现Full Page Scrolling时Sticky Header布局问题求助

核心问题是固定定位的粘性头部脱离了文档流，导致section内容从视口顶部开始渲染，被头部遮挡。以下是两种可靠的解决方法：

方法一：给根容器添加顶部内边距（推荐） #

给html元素添加与头部高度一致的padding-top，同时开启box-sizing: border-box避免页面宽度溢出。这样整个页面的内容会自动从头部下方开始布局，完美适配scroll-snap的对齐逻辑：

html {
  min-height: 100%;
  max-width: 100%;
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  padding-top: 8rem; /* 与头部高度保持一致 */
  box-sizing: border-box;
}

/* 确保头部是固定定位 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem; /* 对应html的padding-top值 */
  z-index: 999;
  background-color: #fff; /* 避免透明导致下方内容透出 */
}

方法二：调整Section的高度与外边距 #

如果不想修改根容器样式，可以直接调整section的高度，用calc()减去头部高度，同时添加顶部外边距避开头部：

.scroll-section{
  min-height: calc(100vh - 8rem); /* 视口高度减去头部高度 */
  padding: 8rem 0;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8rem; /* 与头部高度一致 */
}

注意：这种方法需要确保scroll-snap-align: start的对齐位置符合预期，因为margin会影响section的滚动锚点。

关键说明 #

• 固定定位的元素不占用文档流空间，所以必须通过内边距或外边距为内容腾出位置。
• 两种方法都需要保证头部高度与偏移值（padding-top/margin-top）完全一致，避免出现间隙或遮挡。

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