固定的導航欄在不在頂部且不滾動時消失的問題無法按預期工作

Question

我正在嘗試構建一個在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()可以解決這兩個問題，但事實並非如此。

提前致謝。

Answer 1

對於滾動行為，我在您的事件偵聽器中進行了一些更改，這是一個簡化版本：

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");
    }
});

您可以簡單地基於這些類在導航欄上使用相對樣式或固定樣式。 您的代碼中還有一個錯誤，因為隱藏變量在其范圍之外無法訪問

Answer 2

我發現了這個問題，所以我會把它貼在這里，供未來可能遇到同樣問題的居民使用。 我所要做的就是在函數外聲明hide ，現在它產生了奇跡。

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

PS：我不知道如何結束這個問題。