滚动后菜单移动不打开

Question

我有一个带有移动菜单的代码，当单击该图标时，它会打开和关闭。

当页面向下滚动以隐藏滚动时，我还添加了“滚动”功能。

但是一切似乎都正常，当我第一次进入时它正常打开和关闭，但是当我滚动并尝试再次单击菜单时它不再打开。

我在控制台中找不到错误，有人可以帮助我吗？

 //barra de rolagem let nav = document.querySelector('.nav'); let scrollAnterior = 0; window.addEventListener('scroll', function() { let scrollAtual = window.pageYOffset; let alturaTotal = document.body.offsetHeight; if (scrollAtual > scrollAnterior) { nav.style.display = 'none'; } else { nav.style.display = 'block'; } if (scrollAtual == alturaTotal) { nav.style.display = 'block'; } scrollAnterior = scrollAtual; }); //adicionar menu hamburgue const menuToggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.menu'); menuToggle.addEventListener('click', () => { menu.classList.toggle('menu-visible'); }); window.addEventListener('scroll', function() { // Verifica se o menu está aberto e se o botão de toggle foi clicado if (menu.classList.contains('menu-visible') && menuToggle.clicked) { // Fecha o menu menu.classList.remove('menu-visible'); } });

 @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; } }

 <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>

Answer 1

我在想你的菜单可见 class 应该有一个固定的 position。 这样它就会出现在屏幕所在的位置。现在，当您单击它时，它可能会出现在页面顶部，但是由于您正在滚动到底部，因此您看不到它。