Come creare: barra di navigazione fissa/adesiva

Come creare una barra di navigazione adesiva

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：

/* Imposta lo stile della barra di navigazione */
#navbar {
  overflow: hidden;
  background-color: #333;
}
/* Link della barra di navigazione */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
/* Contenuto della pagina */
.content {
  padding: 16px;
}
/* Quando raggiungi la posizione di scorrimento, aggiungi la classe "sticky" alla barra di navigazione tramite JS */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Aggiungi alcune margini interne superiori al contenuto della pagina per prevenire movimenti improvvisi rapidi (poiché la barra di navigazione ottiene una nuova posizione in alto nella pagina (position:fixed e top:0)) */
.sticky + .content {
  padding-top: 60px;
}

Passo 3 - Aggiungi JavaScript：

// Quando l'utente scorre la pagina, esegui myFunction
window.onscroll = function() {myFunction()};
// Ottieni la barra di navigazione
var navbar = document.getElementById("navbar");
// Ottieni la posizione di scorrimento della barra di navigazione
var sticky = navbar.offsetTop;
// Quando raggiungi la posizione di scorrimento della barra di navigazione, aggiungi la classe "sticky". Quando esci dalla posizione di scorrimento, rimuovi la classe "sticky".
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  else {
    navbar.classList.remove("sticky");
  }
}

Prova personalmente