如何避免两个fixed定位组件发生重叠？

核心问题在于：fixed定位元素是相对于视口定位的，不受文档流内元素（包括body的padding）影响，所以你之前只给body加paddingTop的操作，只会让普通页面内容下移，但不会改变原有fixed导航栏和自定义栏的位置，导致两者都挤在视口顶部重叠。

要让两个fixed栏同时显示且不重叠，需要以下两步：

• 让自定义栏的top值等于原有fixed导航栏的高度，把它“推”到导航栏下方
• 调整body的paddingTop为两个栏的高度之和，避免页面普通内容被两个fixed栏遮挡

针对Stack Overflow的具体实现代码 #

// 1. 获取页面已有的顶部fixed导航栏（SO的导航栏是header.s-topbar）
const existingFixedHeader = document.querySelector('header.s-topbar');
const existingHeaderHeight = existingFixedHeader ? existingFixedHeader.offsetHeight : 0;

// 2. 创建自定义栏
const rootElement = document.createElement("div");
rootElement.id = "chrome-bar";
// 设置top为原有导航栏的高度，避免重叠
rootElement.style = `position:fixed;z-index:99999;top:${existingHeaderHeight}px;background-color:black;width:100vw;color:white;height:40px;line-height:40px;padding-left:16px;`;

// 3. 调整body的paddingTop，让页面内容不被两个fixed栏挡住
document.body.style.paddingTop = `${existingHeaderHeight + 40}px`;

// 4. 将自定义栏插入页面
document.body.prepend(rootElement);
rootElement.innerHTML = "Hello World";

适配动态场景（导航栏高度变化） #

如果页面的fixed导航栏高度会随窗口大小、滚动状态变化（比如SO的导航栏在滚动时会缩小），需要添加事件监听实时更新位置：

function adjustCustomBar() {
  const existingFixedHeader = document.querySelector('header.s-topbar');
  const existingHeaderHeight = existingFixedHeader ? existingFixedHeader.offsetHeight : 0;
  const customBar = document.getElementById('chrome-bar');
  
  if (customBar) {
    customBar.style.top = `${existingHeaderHeight}px`;
    document.body.style.paddingTop = `${existingHeaderHeight + 40}px`;
  }
}

// 初始化执行
adjustCustomBar();
// 监听窗口大小变化
window.addEventListener('resize', adjustCustomBar);
// 监听滚动（应对导航栏高度随滚动变化的情况）
window.addEventListener('scroll', adjustCustomBar);

适配无fixed导航栏的页面（比如GitHub） #

当页面没有顶部fixed导航栏时，existingHeaderHeight会自动取0，自定义栏会固定在视口顶部，body的paddingTop为40px，正好符合你想要的效果。

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