时间戳

首页 > 解决方案 > 修复了导航栏在不在顶部且不滚动时消失的问题，无法按预期工作

javascript - 修复了导航栏在不在顶部且不滚动时消失的问题，无法按预期工作

问题描述

我正在尝试构建一个在window.pageYOffset小于 500 时正常显示的导航栏，否则它将在滚动时显示并在用户停止滚动后隐藏 1200 毫秒。这是我的 CodePen https://codepen.io/youssefwael/pen/LYZKmom，在 js 的底部你会看到我卡在的部分

document.addEventListener("scroll", () => {
    nav.style.display = "block";
    clearTimeout(hide);
    if (window.pageYOffset > 500) {
        const hide = setTimeout(() => {
            nav.style.display = "none";
        }, 1200);
    }
});

我在这里做错了什么？从昨天开始，我一直在尝试解决这个问题，因为我觉得它真的应该起作用。目前，如果您快速上下滚动，它会导致超时。此外，从底部向上快速滚动会导致导航栏在顶部消失，这是不应该发生的。我认为添加clearTimeout()将解决这两个问题，但事实并非如此。

提前致谢。

标签： javascripthtml

解决方案

对于滚动行为，我在您的事件侦听器中进行了一些更改这是一个简化版本：

const myNavbar = document.querySelector(".navbar__menu");

document.addEventListener("scroll", () => {
    if (window.pageYOffset > 500) {
      myNavbar.classList.add("navbar-fixed");
      myNavbar.classList.remove("navbar-relative");
    }
  else if (window.pageYOffset < 500) {
      myNavbar.classList.add("navbar-relative");
    myNavbar.classList.remove("navbar-fixed");
    }
});

您可以基于这些类简单地使用相对样式或固定在导航栏上。您的代码中还有一个错误，因为在其范围之外无法访问隐藏变量

推荐阅读