当Header含is-fixed类时为兄弟元素#main添加指定类

核心需求 #

• 跟踪<header>元素的类变化，仅当header被添加is-fixed类时，为其兄弟元素#main添加对应类
• Header滚动行为：向下滚动时隐藏，向上滚动时显示，滚动过程中会被自动添加多个状态类
• 最终目标：通过切换#main的类，实现header隐藏/显示时侧边菜单的位置调整

初始脚本 #

JavaScript逻辑 #

const header = document.querySelector("header");
let lastScroll = 0;

const throttle = (func, time = 100) => {
  let lastTime = 0;
  return () => {
    const now = new Date();
    if (now - lastTime >= time) {
      func();
      time = now;
    }
  };
};

const validateHeader = () => {
  const windowY = window.scrollY;
  const windowH = window.innerHeight;
  if (windowY > windowH) {
    // 滚动超过视口高度，添加固定类
    header.classList.add("is-fixed");
    // 判断是否满足动画触发条件
    if (windowY > windowH + 40) {
      header.classList.add("can-animate");
      if (windowY < lastScroll) {
        // 向上滚动时添加显示类
        header.classList.add("scroll-up");
      } else {
        // 向下滚动时移除显示类
        header.classList.remove("scroll-up");
      }
    } else {
      header.classList.remove("scroll-up");
    }
  } else {
    // 回到顶部区域，移除固定和动画类
    header.classList.remove("is-fixed", "can-animate");
  }
  lastScroll = windowY;
};

window.addEventListener("scroll", throttle(validateHeader, 100));

对应的HTML结构 #

<body>
  <header id="header" class="fixed-top">stuff</header>
  <section>stuff</section>
  <section>stuff</section>
  <main id="main" class="components">stuff</main>
</body>

更新后的代码 #

调整后尝试仅在#header处于特定类状态时，为#main添加/移除类：

const header = document.querySelector("header");
let lastScroll = 0;
const throttle = (func, time = 100) => {
  let lastTime = 0;
  return () => {
    const now = new Date();
    if (now - lastTime >= time) {
      func();
      time = now;
    }
  };
};
const validateHeader = () => {
  const windowY = window.scrollY;
  const windowH = window.innerHeight;
  // 补充获取main元素，修复原代码未定义main的问题
  const main = document.querySelector("#main");
  
  if (windowY > windowH) {
    // 滚动超过视口，给header添加固定类
    header.classList.add("is-fixed");
    // 触发动画状态
    if (windowY > windowH + 0) {
      header.classList.add("can-animate");
      if (windowY < lastScroll) {
        // 向上滚动：显示header，恢复侧边导航位置
        header.classList.add("scroll-up");
        main.classList.remove("move-sidenav");
      } else {
        // 向下滚动：隐藏header，调整侧边导航位置
        header.classList.remove("scroll-up");
        main.classList.add("move-sidenav");
      }
    } else {
      header.classList.remove("scroll-up");
      main.classList.add("move-sidenav");
    }
  } else {
    // 回到顶部区域：移除header固定类，恢复侧边导航位置
    header.classList.remove("is-fixed", "can-animate");
    main.classList.remove("move-sidenav");
  }
  lastScroll = windowY;
};
window.addEventListener("scroll", throttle(validateHeader, 100));

关键调整点 #

• 补上了main元素的获取语句，解决原代码中main未定义的报错问题
• 严格绑定header的is-fixed状态（即windowY > windowH的判断分支）与main的类操作逻辑，确保只有当header处于固定状态时才调整侧边菜单位置
• 结合滚动方向（向上/向下），精准切换main的move-sidenav类，适配header显示/隐藏时的布局变化

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