Come creare: far scorrere la barra di navigazione verso il basso durante lo scorrimento

Come far scorrere la barra di navigazione verso il basso

Passo 1 - Aggiungi HTML:

Crea la barra di navigazione:

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">Notizie</a>
  <a href="#contact">Contatti</a>
</div>

Passo 2 - Aggiungi CSS:

Imposta lo stile della barra di navigazione:

#navbar {
  colore di sfondo: #333; /* Colore di sfondo nero */
  posizione: fisso; /* Lo rende aderente/fisso */
  alto: -50px; /* Nasconde la barra di navigazione 50px al di fuori della vista superiore */
  larghezza: 100%; /* Larghezza completa */
  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 del testo: centro;
  riempimento: 15px;
  decorazione del testo: none;
}
#navbar a:hover {
  colore di sfondo: #ddd;
  colore: nero;
}

Passo 3 - Aggiungi JavaScript:

// Quando l'utente scorre di 20px dal punto superiore del documento, scorre verso il basso la barra di navigazione
// Quando l'utente scorre alla parte superiore della pagina, scorre verso l'alto la barra di navigazione (a 50px di distanza dalla vista superiore)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

Prova da solo