I'm trying to make my navbar retract upwards when I scroll down and then appear again when I scroll up, but it doesn't do anything

Question

I'm very new to writing code but I've seen this done the same way, I don't get why it does nothing. The issue is likely somewhere in the CSS part.

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- I'm not exactly sure why I have to put all the links in their separate navbar-items class divs, but if I don't do this they start overlapping the header (i want the navbar to have that name on the left and the links on the right) and also make the other contents of the page after the navbar vanish.

<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

As the comment from CBroe points to, you issue is that you are expecting an element back from document.getElementsByClassName("navbar") but you are actually getting back an array. To access the element you need to pull it out of the array, you can do this like document.getElementsByClassName("navbar")[0] .

So updating your code to

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

Should fix the issue.