Hur man skapar: Rulla ner navigationsfältet vid rullning

Hur man rullar ner navigationsfältet

Steg 1 - Lägg till HTML:

Skapa navigationsfält:

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Steg 2 - Lägg till CSS:

Ställ in navigationsfältets stil:

#navbar {
  bakgrundsfärg: #333; /* Svart bakgrundsfärg */
  position: fast; /* Gör det klistrat/f fast */
  topp: -50px; /* Dölj navigationsfältet 50px utanför toppvyn */
  bredd: 100%; /* Full bredd */
  övergång: topp 0.3s; /* Effekt vid nedåt (uppåt) rullning */
}
/* Ställ in stilen för navigationslänkar */
#navbar a {
  flytta: vänster;
  display: block;
  färg: vit;
  text-align: center;
  marginal: 15px;
  textdekor: none;
}
#navbar a:hover {
  bakgrundsfärg: #ddd;
  färg: svart;
}

Steg 3 - Lägg till JavaScript:

// När användaren rullar ner 20px från dokumentets topp, rulla navigationsfältet neråt
// När användaren rullar till sidans topp, rulla navigationsfältet uppåt (50px från toppvyn)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  om (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } annars {
    document.getElementById("navbar").style.top = "-50px";
  }
}

Prova själv