解决relative header切换为fixed header时内容被遮挡的问题

核心问题是：当Header从相对定位切换为固定定位时，固定元素会脱离文档流，不再占据原来的空间，导致下方内容自动上移填补空缺，从而出现覆盖现象。只需填补这个空缺的空间，就能实现无缝过渡。

具体修改方案 #

1. 调整CSS，修复Header宽度并预留空间

修改固定状态下的Header样式，确保宽度和原容器一致，同时通过CSS变量为容器预留空间：

body,html {
  margin:0;
}
/* 定义CSS变量存储Header高度 */
:root {
  --header-height: 0;
}
.site-container {
  position:relative;
  width:90%;
  height:1500px;
  margin:0 auto;
  background:gray;
  /* 过渡动画让空间变化更平滑 */
  transition: padding-top 0.2s ease;
}

img {
  width:100%;
}

header {
  display:flex;
  flex-direction:column;
  width:100%;
  background:white;
}

/* 固定Header时，让其和容器同宽 */
body.sticky header {
  position:fixed;
  left:5%; /* 和.site-container的margin-left一致 */
  right:5%; /* 和.site-container的margin-right一致 */
  width:auto;
  top:0;
}

/* 当Header固定时，给容器添加等于Header高度的内边距 */
body.sticky .site-container {
  padding-top: var(--header-height);
}

.top-bar {
  background:purple;
  color:white;
  padding:3px 0;
  text-align:right;
}

ul {
  margin:0;
  padding-left:10px;
  list-style-type:none;
}

li {
  display:inline-block;
  margin-left:10px;
  line-height:30px;
}
li:first-child {
  margin-left:0;
}

.site-content {
  padding:50px 30px;
}

2. 修改JS，设置CSS变量并控制切换逻辑

用JS计算Header的高度并赋值给CSS变量，同时控制sticky类的添加/移除：

$(function() {
  // 获取Header的实际高度（包含内边距、边框）
  var hh = $('header').outerHeight();
  // 将高度赋值给CSS变量
  document.documentElement.style.setProperty('--header-height', hh + 'px');
  
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    // 当滚动距离超过Header高度时切换为固定定位
    if (scroll >= hh) {
      $('body').addClass('sticky');
    } else {
      $('body').removeClass('sticky');
    }
  });
});

关键原理说明 #

• 固定定位的元素脱离文档流后，原位置的空间会被下方内容占据，通过给.site-container添加padding-top: var(--header-height)，刚好填补Header原本占据的空间，避免内容上移。
• 使用CSS变量可以更灵活地控制高度，避免硬编码；添加过渡动画让空间变化更平滑，提升用户体验。
• 调整固定Header的left和right值，确保其宽度和父容器.site-container一致，避免切换后宽度突变。

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