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