网站不同区域切换时固定头部样式切换失效求助

你的代码核心问题是错误使用了scrollTop属性：top1.scrollTop获取的是元素自身内部的滚动距离，而非元素在整个文档中的垂直位置。要实现响应式的区域检测，需要获取元素相对于文档顶部的偏移量。

修复方案 #

1. 获取正确的元素位置 #

使用offsetTop获取元素相对于文档顶部的距离（若元素父级无定位，该值直接对应文档顶部偏移）；若页面存在复杂定位布局，可改用getBoundingClientRect().top + window.scrollY获取更精准的位置。

2. 优化代码逻辑 #

• 缓存DOM元素，避免每次滚动重复查询DOM节点
• 监听窗口resize事件，确保响应式布局下元素位置能重新计算
• 简化颜色切换逻辑，去掉冗余的当前颜色判断（每个区域的目标样式是固定的）

修改后的完整代码 #

<script>
// 提前缓存DOM元素，提升性能
const logo = document.getElementById("logo");
const dynamicHeaderText = document.querySelector(".dynamic-header-text");
const sections = {
  bigLanding: document.getElementById("big-landing"),
  cbt1: document.getElementById("cbt-1"),
  cbt2: document.getElementById("cbt-2")
};

// 计算各区域相对于文档顶部的偏移量
function getSectionOffsets() {
  return {
    y1: sections.bigLanding.offsetTop,
    y2: sections.cbt1.offsetTop,
    y3: sections.cbt2.offsetTop
  };
}

let offsets = getSectionOffsets();

function updateHeaderStyle() {
  const scrollPos = window.scrollY || document.documentElement.scrollTop;
  const { y1, y2, y3 } = offsets;

  if (scrollPos >= y1 && scrollPos < y2) {
    // 第一区域样式
    logo.src = "/assets/logo-no-type-inv.svg";
    $(".menu-circle").css("background-color", "black");
    $(".menu-overlay a").css("color", "white");
    dynamicHeaderText.style.color = "white";
  } else if (scrollPos >= y2 && scrollPos < y3) {
    // 第二区域样式
    logo.src = "/assets/logo-no-type.svg";
    $(".menu-circle").css("background-color", "#ffaa00");
    $(".menu-overlay a").css("color", "black");
    dynamicHeaderText.style.color = "black";
  } else if (scrollPos >= y3) {
    // 第三区域样式
    logo.src = "/assets/logo-no-type-inv.svg";
    $(".menu-circle").css("background-color", "black");
    $(".menu-overlay a").css("color", "white");
    dynamicHeaderText.style.color = "white";
  } else {
    // 初始顶部区域样式（可根据需求调整默认值）
    logo.src = "/assets/logo-no-type.svg";
    $(".menu-circle").css("background-color", "");
    $(".menu-overlay a").css("color", "");
    dynamicHeaderText.style.color = "black";
  }
}

// 绑定事件
window.onload = updateHeaderStyle;
window.onscroll = updateHeaderStyle;
window.onresize = () => {
  offsets = getSectionOffsets(); // 窗口大小变化时重新计算位置
  updateHeaderStyle();
};
</script>

关键说明 #

• 响应式适配：窗口大小变化时，元素位置会改变，通过resize事件重新计算偏移量，保证滚动触发逻辑始终准确。
• 性能优化：缓存DOM元素后，每次滚动无需重复查询节点，减少性能开销。
• 样式逻辑简化：每个区域的目标样式是固定的，直接设置目标值即可，无需判断当前样式状态。

内容的提问来源于stack exchange，提问作者Basil M.