滚动后Mobile Menu无法打开的问题求助

核心问题分析 #

1. 导航栏被强制隐藏导致菜单无法显示：滚动逻辑中直接设置nav.style.display = 'none'，页面向下滚动后，整个导航栏（包含内部菜单）被隐藏。此时点击菜单按钮，即便给.menu添加了menu-visible类，父元素.nav处于隐藏状态，菜单依然无法显示。
2. 无效判断条件：第二个滚动监听里的menuToggle.clicked是未定义的自定义属性，该判断永远不会成立，且滚动关闭菜单的逻辑实现错误。

修复后的完整代码 #

JavaScript

// 导航栏滚动控制
let nav = document.querySelector('.nav');
let scrollAnterior = 0;
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');

window.addEventListener('scroll', function() {
  let scrollAtual = window.pageYOffset;
  let alturaTotal = document.body.offsetHeight;
  const menuIsVisible = menu.classList.contains('menu-visible');

  // 菜单展开时不隐藏导航栏，若需滚动时自动关菜单可替换为注释内逻辑
  if (!menuIsVisible) {
    if (scrollAtual > scrollAnterior) {
      nav.classList.add('nav-hidden');
    } else {
      nav.classList.remove('nav-hidden');
    }

    // 修正滚动到底部的判断逻辑
    if (scrollAtual === alturaTotal - window.innerHeight) {
      nav.classList.remove('nav-hidden');
    }
  }

  // 滚动时自动关闭展开的菜单
  if (menuIsVisible) {
    menu.classList.remove('menu-visible');
  }

  scrollAnterior = scrollAtual;
});


// 汉堡菜单切换逻辑
menuToggle.addEventListener('click', () => {
  // 点击菜单时强制显示导航栏
  nav.classList.remove('nav-hidden');
  menu.classList.toggle('menu-visible');
});

CSS

@media (max-width: 767px) {
  .menu {
    display: none;
  }
  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 36px;
    cursor: pointer;
    z-index: 2;
  }
  .menu-visible {
    display: block;
    margin: 2px;
    text-align: center;
  }
  /* 用类控制导航栏隐藏，避免直接覆盖display属性 */
  .nav-hidden {
    display: none;
  }
}

HTML（无需修改）

<header>
  <div class="logo-container">
    <a href="/index.html"><i class="fa-solid fa-book-bible"></i></a>
  </div>
  <div class="menu-toggle">
    <i class="fa-solid fa-bars"></i>
  </div>
  <nav class="nav">
    <div class="menu-item appear">
      <ul class="menu fade">
        <li class="menu-item"><a href="#">Sobre</a></li>
        <li class="menu-item"><a href="#">Contato</a></li>
        <li id="logo" class="logo logo-item">
          <a href="#">
            <img src="./img/icons8-igreja-40.png" alt="Descrição da imagem" title="Descrição da imagem">
          </a>
        </li>
        <li class="menu-item"><a href="./login-cadastro/login.html">Login /Cadastro</a></li>
      </ul>
    </div>
  </nav>
</header>

关键改动说明 #

1. 用类控制导航栏显示：替换直接操作nav.style.display的方式，改用.nav-hidden类管理导航栏隐藏状态，避免行内样式覆盖子元素显示逻辑。
2. 菜单展开状态的特殊处理：滚动时若菜单处于展开状态，不隐藏导航栏；点击菜单按钮时强制显示导航栏，确保菜单能正常展开。
3. 修复滚动关闭菜单逻辑：移除无效的menuToggle.clicked判断，直接检测menu-visible类实现滚动自动关菜单的需求。
4. 修正滚动到底部的判断：原代码scrollAtual == alturaTotal永远不成立，改为scrollAtual === alturaTotal - window.innerHeight准确判断滚动到底部的状态。

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