Hoe OM - Verander die grootte van kopskrif op rol
Leer hoe om 'n kopskrif te krimp wanneer jy blaai met CSS en JavaScript.
Hoe om 'n kopskrif op rol te verklein
Stap 1) Voeg HTML by:
Skep 'n kopskrif:
Voorbeeld
<div id="header">Header</div>
Stap 2) Voeg CSS by:
Stileer die kopskrif:
Voorbeeld
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font
size */
font-weight: bold;
position: fixed; /* Fixed
position - sit on top of the page */
top: 0;
width: 100%;
/* Full width */
transition: 0.2s; /* Add a transition effect (when
scrolling - and font size is decreased) */
}
Stap 3) Voeg JavaScript by:
Voorbeeld
// When the user scrolls down 50px from the top of the document, resize the
header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50) {
document.getElementById("header").style.fontSize = "30px";
} else {
document.getElementById("header").style.fontSize = "90px";
}
}