Cómo crear: ocultar el menú al desplazarse

Cómo ocultar la barra de navegación al desplazarse hacia abajo

Primer paso - Añadir HTML：

Crear la barra de navegación：

<div id="navbar">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <a href="#contact">Contacto</a>
</div>

Segundo - Añadir CSS：

Establecer el estilo de la barra de navegación：

#navbar {
  background-color: #333; /* Color de fondo negro */
  position: fixed; /* Hacer que se adhiera/fijar */
  top: 0; /* Mantener en la parte superior */
  width: 100%; /* Ancho completo */
  transition: top 0.3s; /* Efecto de transición al deslizar hacia abajo (hacia arriba) */
{}
/* Establecer el estilo de los enlaces de la barra de navegación */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
{}
#navbar a:hover {
  background-color: #ddd;
  color: black;
{}

Tercero - Añadir JavaScript：

/* Al scroll hacia abajo, ocultar la barra de navegación. Al scroll hacia arriba, mostrar la barra de navegación. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Prueba por tu cuenta