Sådan oprettes: Glider navigationsfeltet nedad ved rulning

Sådan glider navigationsfeltet nedad

Første trin - Tilføj HTML:

Opret navigationsfeltet:

<div id="navbar">
  <a href="#home">Hjem</a>
  <a href="#news">Nyheder</a>
  <a href="#contact">Kontakt</a>
</div>

Andet trin - Tilføj CSS:

Indstil navigationsfeltets stil:

#navbar {
  baggrundsfarve: #333; /* Sort baggrundsfarve */
  position: fast; /* Gør det fastlåst/fixed */
  top: -50px; /* Gem navigationsfeltet uden for topvinduet 50px */
  bredde: 100%; /* Hele bredde */
  overgang: top 0.3s; /* Overgangseffekt ved at glide nedad (opad) */
}
/* Indstil stilen for navigationsfeltets links */
#navbar a {
  flydende: venstre;
  vis: blok;
  farve: hvid;
  tekstjustering: center;
  marginal: 15px;
  tekstdekorering: ingen;
}
#navbar a:hover {
  baggrundsfarve: #ddd;
  farve: sort;
}

Tredje trin - Tilføj JavaScript:

// Når brugeren ruller ned 20px fra dokumentets top, flyt navigationsfeltet nedad
// Når brugeren ruller op til sidste side, flyt navigationsfeltet opad (50px fra topvinduet)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  hvis (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } ellers {
    document.getElementById("navbar").style.top = "-50px";
  }
}

Prøv selv