Come creare: nascondi il menu durante lo scorrimento

Come nascondere la barra di navigazione durante lo scorrimento verso il basso

Passo primo - Aggiungi HTML:

Crea la barra di navigazione:

<div id="navbar">
  <a href="#home">Casa</a>
  <a href="#news">Notizie</a>
  <a href="#contact">Contatto</a>
</div>

Passo secondo - Aggiungi CSS:

Imposta lo stile della barra di navigazione:

#navbar {
  sfondo-color: #333; /* Colore di sfondo nero */
  posizione: fisso; /* Fissa / rendi fissa */
  alto: 0; /* Mantieni in alto */
  larghezza: 100%; /* Larghezza totale */
  trasformazione: alto 0.3s; /* Effetto di transizione quando scorre verso il basso (verso l'alto) */
}
/* Imposta lo stile dei link della barra di navigazione */
#navbar a {
  flottante: sinistro;
  visualizzazione: blocco;
  colore: bianco;
  allineamento-testo: centro;
  spaziatura: 15px;
  decorazione-testo: none;
}
#navbar a:hover {
  sfondo-color: #ddd;
  colore: nero;
}

Passo terzo - Aggiungi JavaScript:

/* Quando l'utente scrollera verso il basso, nascondi la barra di navigazione. Quando l'utente scrollera verso l'alto, mostra la barra di navigazione. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  se (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  altrimenti {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Prova tu stesso