实现滚动时Header与Hamburger侧边导航同步隐藏的方案求助

我在Header里加了汉堡导航，点击会从右侧弹出侧边菜单。现在向下滚动页面时Header会隐藏，但侧边菜单不会跟着隐藏，希望二者能同时隐藏。尝试把Header的隐藏逻辑复用给侧边菜单反而出了更多问题，求解决。

解决方案 #

核心逻辑是在滚动控制Header显示/隐藏时，同步控制汉堡菜单的复选框状态，利用原有CSS逻辑自动收起侧边菜单，同时加额外样式作为保险：

修改后的代码 #

JavaScript

////Secondary pages Header scroll effect//////

const SCROLL_THRESHOLD = 30;

let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;
  const delta = currentScrollY - lastScrollY;
  const header = document.querySelector(".the-header");
  const menuToggle = document.getElementById("menu__toggle");

  if (delta > 0 && delta >= SCROLL_THRESHOLD) {
    // 向下滚动足够距离：隐藏Header + 关闭侧边菜单
    header.classList.add("nav_up");
    menuToggle.checked = false; // 取消复选框选中，触发侧边栏收起
  } else if (delta < 0 && -delta >= SCROLL_THRESHOLD) {
    // 向上滚动足够距离：显示Header
    header.classList.remove("nav_up");
  }

  lastScrollY = currentScrollY;
});

CSS

body{
  height: 30000px;
  background-color: lightblue;
  color: white;
}
.header__top {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000 ;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: top 0.5s ease-in-out;
}
.the-header { /*make header dissapear*/
  top: 0px;
  transition: top 0.5s ease-in-out;
}
#hamburger__menu {
    background-color: #000;
    z-index: 10;
}
#menu__toggle {
    opacity: 0;
}
#menu__toggle:checked+.menu__btn .menu__hamburger {
  transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn .menu__hamburger::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn .menu__hamburger::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
  right: 0 !important;
}
.menu__btn {
  position: fixed;
  right: 40px;
  width: 100px;
  height: auto;
  cursor: pointer;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 1em;
}
#menu {
  color: #fff;
  font-size: 1.5rem;
  
}
.menu__btn .menu__hamburger,
.menu__btn .menu__hamburger::before,
.menu__btn .menu__hamburger::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #FFF;
  transition-duration: .5s;
}
.menu__btn .menu__hamburger::before {
  content: '';
  top: -8px;
}
.menu__btn .menu__hamburger::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: rgba(79, 112, 148, 0.8);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .7);
  transition-duration: .5s;
  z-index: 10;
}
.menu__item {
  display: block;
  padding: 12px 24px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #87b6ca;
}
.nav_up { /*---disappearing nav effect---*/
  top: -500px;
}

/* 额外保险：Header隐藏时强制收起侧边菜单 */
.the-header.nav_up #hamburger__menu .menu__box {
  right: -100% !important;
}

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <header class="header__top the-header">
    <div id="hamburger__menu">
      <input id="menu__toggle" type="checkbox" />
      <label class="menu__btn" for="menu__toggle">
        <div id="menu">MENU</div>
        <div><span class="menu__hamburger"></span></div>
      </label>
      <ul class="menu__box">
        <li class="menu__item">HOMEPAGE</li>
        <li class="menu__item">NEWS</li>
        <li class="menu__item">ABOUT</li>
        <li class="menu__item">FACILITIES</li>
      </ul>
    </div>
</header>
</body>

逻辑说明 #

1. 滚动向下时，除了给Header添加nav_up类隐藏它，直接设置汉堡菜单的复选框为未选中状态，利用你原有的CSS逻辑自动收起侧边菜单
2. 额外添加的CSS规则是为了避免极端情况下复选框状态不同步的问题，强制在Header隐藏时让侧边菜单保持收起
3. 这种方式不需要修改原有的菜单展开/收起逻辑，只是在滚动时同步控制复选框状态，兼容性更好，也不会引发新的问题

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