Hur skapar man: Klistrande/fast navigationsfält

Hur skapar man en klistrande navigationsmeny

Första steget - Lägg till HTML:

Skapa navigationsfältet:

<div id="navbar">
  <a href="#home">Hem</a>
  <a href="#news">Nyheter</a>
  <a href="#contact">Kontakt</a>
</div>

Andra steg - Lägg till CSS:

Ställ in stilen för navigationsfältet:

/* Ställ in stilen för navigationsfältet */
#navbar {
  overflow: hidden;
  background-color: #333;
}
/* Länkar i navigationsfältet */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
/* Sidans innehåll */
.content {
  padding: 16px;
}
/* När du når din rullningsposition, lägg till klassen "sticky" till navigationsfältet via JS */)
.sticky {
  position: fast;
  top: 0;
  width: 100%;
}
/* Lägg till något övre inre marginal till sidans innehåll för att förhindra plötsliga snabba rörelser (eftersom navigationsfältet får en ny position på sidan toppen (position:fast och top:0) */)
.sticky + .content {
  padding-top: 60px;
}

Tredje steg - Lägg till JavaScript:

// Utför myFunction när användaren rullar på sidan
window.onscroll = function() {myFunction()};
// Hämta navigationsfältet
var navbar = document.getElementById("navbar");
// Hämta rullningspositionen för navigationsfältet
var sticky = navbar.offsetTop;
// När du når rullningspositionen för navigationsfältet, lägg till klassen "sticky" till den. Ta bort klassen "sticky" när du lämnar rullningspositionen.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prova själv