Soy muy nuevo en escribir código, pero he visto que esto se hace de la misma manera, no entiendo por qué no hace nada. Es probable que el problema esté en algún lugar de la parte 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: no estoy exactamente seguro de por qué tengo que poner todos los enlaces en sus divs de clase de elementos de barra de navegación separados, pero si no hago esto, comienzan a superponerse al encabezado (quiero que la barra de navegación tenga ese nombre a la izquierda y los enlaces a la derecha) y también hacer que el resto del contenido de la página desaparezca después de la barra de navegación.

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