我試圖讓我的導航欄在我向下滾動時向上縮回，然后在我向上滾動時再次出現，但它沒有做任何事情

Question

我對編寫代碼非常陌生，但我看到它以同樣的方式完成，我不明白為什么它什么都不做。 問題可能在 CSS 部分的某個地方。

JavaScript

var navbar = document.getElementsByClassName("navbar");
       var lastY = window.pageYOffset;
       window.onscroll = function()
      {
       var currY = window.pageYOffset;
       if (lastY > currY)
       {
        document.getElementsByClassName("navbar").style.top = "0";
       }
       else
       {
        document.getElementsByClassName("navbar").style.top = "-50px";
       }
       lastY = currY;
      }

HTML-我不完全確定為什么我必須將所有鏈接放在它們單獨的導航欄項目類 div 中，但是如果我不這樣做，它們就會開始重疊標題（我希望導航欄在左側有該名稱以及右側的鏈接），並且還會使導航欄后頁面的其他內容消失。

<div class="navbar">
        <h1>Квартална кръчма Тримата глупаци</h1>
        <div class="navbar-items">
          <div class="navbar-items"><a href="index.html">Home</a></div>
          <div class="navbar-items"><a style="color:red;" href="Menu.html">Menu</a></div>
          <div class="navbar-items"><a href="About_Us.html">About us</a></div>
          <div class="navbar-items"><a href="Contact_Us.html">Contact us</a></div>
        </div>
      </div>

CSS

.navbar {
    overflow: hidden;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#505d61;
    z-index: 99;
    padding: 10px;
    height: 60px;
    top: 0;
    width: 100%;
    box-shadow: 0 0 10px black;
}

.navbar-items {
    overflow: hidden;
    float:left;
    display:block;
    margin-left: 40px;
    margin-right: 5px;
    gap: 80px;
    font-size: 21px;
    font-weight: 550;
}

.navbar a{
   color:black;
   text-decoration: none;
}

.navbar a:hover{ 
    color: white;
}

Answer 1

正如 CBroe 的評論所指出的那樣，您的問題是您期望從document.getElementsByClassName("navbar")返回一個元素，但實際上您正在返回一個數組。 要訪問您需要將其從數組中拉出的元素，您可以像document.getElementsByClassName("navbar")[0]一樣執行此操作。

因此，將您的代碼更新為

var lastY = window.pageYOffset;
window.onscroll = function(){
    var currY = window.pageYOffset;
    if (lastY > currY){
        document.getElementsByClassName("navbar")[0].style.top = "0";
    }
    else{
        document.getElementsByClassName("navbar")[0].style.top = "-50px";
    }
    lastY = currY;
}

應該解決問題。