Hoe de grootte van de titel bij scrolen aan te passen
- Vorige pagina Plakbare kop
- Volgende pagina Prijslijst
Leer hoe je de titel van een pagina kunt verkleinen tijdens het scrolen met CSS en JavaScript.
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"; } }
- Vorige pagina Plakbare kop
- Volgende pagina Prijslijst