Hvordan opprette: Krymp navigasjonsmenyen ved rulling

Hvordan krympe navigasjonsfeltet ved rulling

Trinn 1 - Legg til HTML:

Opprett navigasjonsfelt:

<div id="navbar">
  <a href="#default" id="logo">FirmaLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Hjem</a>
    <a href="#contact">Kontakt</a>
    <a href="#about">Om</a>
  </div>
</div>

Trinn 2 - Legg til CSS:

Sett navigasjonsfeltets stil:

/* Opprett et slik / fastlåst navigasjonsfelt */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Større innrymning, som krymper ved rulling (bruker JS) */
  transition: 0.4s; /* Legg til overgangseffekt når innrymningen reduseres */
  position: fixed; /* Slik / fastlåst navigationsfelt */
  width: 100%;
  top: 0; /* Øverst */
  z-index: 99;
}
/* Indstil navigationsfeltets links */
#navbar a {
  float: left;
  farve: sort;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Indstil logoets stil */
#navbar #logo {
  skriftstørrelse: 35px;
  tykkelse: fed;
  overgang: 0.4s;
}
/* Indstil stilen for link ved muspehover */
#navbar a:hover {
  baggrundsfarve: #ddd;
  farve: sort;
}
/* Indstil stilen for aktiv/current link */
#navbar a.active {
  baggrundsfarve: dodgerblå;
  farve: hvid;
}
/* Vis nogle links til højre */
#navbar-right {
  flydende: højre;
}
/* Tilføj responsivitet - vis navigationsfeltet lodret i stedet for vandret på skærme med en bredde på mindre end 580 pixels */
@media screen and (max-width: 580px) {
  #navbar {
    margen: 20px 10px !important; /* Brug !important for at sikre, at JavaScript ikke overskriver indre margen på små skærme */
  }
  #navbar a {
    flydende: ingen;
    vis: blok;
    tekstjustering: venstre;
  }
  #navbar-right {
    flydende: ingen;
  }
}

Trin 3 - Tilføj JavaScript:

// Når brugeren ruller 80 pixels ned fra dokumentets top, justeres navigationsfeltets indre margin og logoets skriftstørrelse
window.onscroll = function() {scrollFunktion()};
function scrollFunktion() {
  hvis (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } ellers {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Prøv det selv