Sådan oprettes: Fastlåst/nøglenavigationslinje

Sådan opretter du en fastsugt navigationslinje

Første trin - Tilføj HTML:

Opret skifteskolen:

<div id="navbar">
  <a href="#hjem">Hjem</a>
  <a href="#nyheder">Nyheder</a>
  <a href="#kontakt">Kontakt</a>
</div>

Andet trin - Tilføj CSS:

Sæt skifteskens stil:

/* Sæt skifteskolen stil */
#navbar {
  overskuelig: skjult;
  baggrundsfarve: #333;
}
/* Skifteskolen links */
#navbar a {
  flydende: venstre;
  visning: blok;
  farve: #f2f2f2;
  tekstjustering: center;
  margning: 14px;
  tekstdekorering: ingen;
}
/* Sidesindhold */
.indhold {
  margning: 16px;
}
/* Tilføj klassen "fastsugt" til skifteskolen, når den når sin rulleposition via JS */
.fastsugt {
  position: fast;
  top: 0;
  bredde: 100%;
}
/* Tilføj lidt topindre kant til sidesindholdet for at undgå pludselige hurtige bevægelser (fordi skifteskolen får en ny placering i toppen af siden (position:fast og top:0)) */
.fastsugt + .indhold {
  padding-top: 60px;
}

Tredje trin - Tilføj JavaScript:

// Kør minFunktion, når brugeren ruller på siden
window.onscroll = function() {minFunktion()};
// Få skifteskolen
var navbar = document.getElementById("navbar");
// Få skifteskolens afstand fra toppen
var fastsugt = navbar.offsetTop;
// Når du når skifteskolens rulleposition, tilføj klassen "fastsugt" til den. Når du forlader rullepositionen, fjern "fastsugt" klassen.
function minFunktion() {
  hvis (window.pageYOffset >= fastsugt) {
    navbar.classList.add("fastsugt")
  } ellers {
    navbar.classList.remove("sticky");
  }
}

Prøv det selv