如何实现自适应固定Header？解决宽度适配与响应式问题

关键逻辑 #

fixed定位元素会脱离文档流，无法直接继承父元素（child-div-2）的宽度与位置。因此需要通过JavaScript动态计算child-div-2的实际偏移和宽度，同步给fixed-header，同时监听窗口大小变化保持自适应，原有的滚动显示逻辑保留不变。

修改后的完整代码 #

CSS 调整

.parent-div {
  width: 100%;
  display: flex;
  gap: 20px;
}

.child-div-1 {
  width: 276px;
}

.child-div-2 {
  flex: 1;
  position: relative; /* 仅作为尺寸计算基准，不影响原有布局 */
}

.fixed-header {
  position: fixed;
  top: 10px;
  /* 移除原width:100%，改用JS动态设置宽度与左偏移 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient( 102deg, #ff6662 -0.12%, #3268f4 117.01%, #193fb2 138.81%);
  display: none; /* 默认隐藏，通过show类控制显示 */
}

.fixed-header.show {
  display: flex;
}

HTML 无需改动

<div class="parent-div">
  <div class="child-div-1"></div>
  <div class="child-div-2">
    <div class="fixed-header"></div>
  </div>
</div>
<div class="banner">顶部Banner内容</div>

JavaScript 补充逻辑

// 获取目标元素
const banner = document.querySelector(".banner");
const header = document.querySelector(".fixed-header");
const childDiv2 = document.querySelector(".child-div-2");

// 同步header的位置与宽度至child-div-2
function syncHeaderStyle() {
  if (!childDiv2 || !header) return;
  const { offsetLeft, offsetWidth } = childDiv2;
  header.style.left = `${offsetLeft}px`;
  header.style.width = `${offsetWidth}px`;
}

// 滚动监听：控制header显示/隐藏
function handleScroll() {
  if (!banner || !header) return;
  const isBannerVisible = banner.getBoundingClientRect().bottom >= 0;
  if (isBannerVisible) {
    header.classList.remove("show");
  } else {
    header.classList.add("show");
    // 显示时同步样式，避免滚动导致的位置偏差
    syncHeaderStyle();
  }
}

// 页面加载时初始化样式
syncHeaderStyle();

// 绑定事件
window.addEventListener("scroll", handleScroll);
window.addEventListener("resize", syncHeaderStyle);

说明 #

• 利用offsetLeft和offsetWidth精准获取child-div-2在页面中的实际位置与宽度，直接赋值给fixed-header，确保它完全贴合父容器范围。
• 监听resize事件，窗口尺寸变化时重新计算样式，保证header始终适配child-div-2的宽度，不会出现超出或过窄的情况。
• 保留原有滚动判断逻辑，仅当banner完全滚出视口时才显示header，显示时同步样式确保位置正确。

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