Hoe de grootte van de titel bij scrolen aan te passen

Leer hoe je de titel van een pagina kunt verkleinen tijdens het scrolen met CSS en JavaScript.

Probeer het zelf

Hoe de titel bij scrolen te verkleinen

Eerste stap - Voeg HTML toe:

Maak de kop aan:

<div id="header">Header</div>

Tweede stap - Voeg CSS toe:

Stel de stijl van de kop in:

#header {
  background-color: #f1f1f1; /* Grijs achtergrond */
  padding: 50px 10px; /* Enkele inspringing */
  color: black;
  text-align: center; /* Centreren van de tekst */
  font-size: 90px; /* Grote lettergrootte */
  font-weight: bold;
  position: fixed; /* Vaste positie - aan de top van de pagina */
  top: 0;
  width: 100%; /* Volbreedte */
  transition: 0.2s; /* Voeg overgangseffect toe (lettergrootte verkleinen bij scrolen) */
}

Derde stap - Voeg JavaScript toe:

// Als de gebruiker 50px van de top van het document naar beneden scrolt, pas de lettergrootte van de titel aan
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  }
    document.getElementById("header").style.fontSize = "90px";
  }
}

Probeer het zelf