Zo maak je een Sticky Header met CSS
In webdesign is een sticky header een krachtig hulpmiddel dat de gebruikerservaring en navigatie verbetert. Wanneer gebruikers naar beneden scrollen op een webpagina, blijft een sticky header zichtbaar, zodat essentiële navigatiekoppelingen altijd toegankelijk zijn. Laten we ons eens verdiepen in de fijne kneepjes van het bouwen van een sticky header met CSS.
Wat heb je aan een sticky header?
Een blijvende header die vast blijft staan op een bepaalde locatie op een webpagina staat bekend als een “sticky header”. Om een dergelijke functionaliteit te creëren, worden specifieke CSS-eigenschappen gebruikt, zoals de eigenschap “position” met de waarde “stick
Gebruikers kunnen moeiteloos de primaire navigatiekoppelingen bekijken zonder dat ze terug naar het begin van de pagina hoeven te scrollen, waardoor ze naadloos en gemakkelijk door onze website kunnen navigeren.
Het logo en de merknaam worden prominent weergegeven, waardoor het onderscheidende karakter van het merk behouden blijft.
Een visueel aantrekkelijke en functionele ontwerpkeuze is de integratie van een sticky header die een overdaad aan zijbalknavigatie overbodig maakt en zo extra ruimte creëert voor de weergave van relevante inhoud op een webpagina.
De koptekst ontwerpen: HTML-structuur
De hoeksteen van een effectieve sticky header ligt in de HTML-architectuur. Om de essentiële onderdelen van een sticky header te maken, volg je deze stappen om de vereiste HTML-elementen te maken.
<body>
<header>
<span class="logo">Company Logo ðŸ </span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home"><h1>Home page</h1></main>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></section>
</body>
Het huidige ontwerp maakt gebruik van een headercomponent met het bedrijfslogo en een navigatie-element met een geordende lijst hyperlinks. Vervolgens wordt gebruikgemaakt van een primaire bijlage en meerdere segmentatiebijlagen om elke verdeling binnen het inhoudsgebied te illustreren. Momenteel ziet de webpagina er als volgt uit:
De basis leggen met CSS
De CSS maakt gebruik van verschillende boxmodelattributen zoals opvulling, marge en flexbox om een visueel aantrekkelijke lay-out te maken, waarin individuele secties een uniforme hoogte krijgen.
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
main,
section { height: 100vh; }
.logo { font-size: 3rem; }
main,
header,
section {
display: flex;
align-items: center;
}
main { justify-content: center; }
header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb;
}
nav ul {
display: flex;
column-gap: 2rem;
list-style: none;
}
a {
text-decoration: none;
font-size: 2rem;
color: #333;
}
section { justify-content: center; }
#home { background: #2c3e50; }
#about { background: #ccccff; }
#services { background: #f5b7b1; }
#contact { background: #40e0d0; }
h1 {
font-size: 4rem;
color: #fff;
}
De pagina zou er nu zo uit moeten zien:
Het kleverige effect implementeren: CSS
Om het probleem op te lossen dat de koptekst van het scherm verdwijnt tijdens het naar beneden scrollen van de pagina, gebruik je de eigenschap CSS position en configureer je de koptekst als een “sticky” element.
Deze specifieke eigenschap vertoont kenmerken die doen denken aan zowel relatieve als vaste positionering, met betrekking tot de scrollhouding van de gebruiker.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Het instellen van een vaste positie van de koptekst ten opzichte van de viewport is een manier om de zichtbaarheid en toegankelijkheid te garanderen terwijl de gebruiker door de inhoud van de webpagina navigeert. Door de waarde van de eigenschap top op te geven in pixels of procenten, kan de ontwikkelaar precies bepalen waar de koptekst wordt weergegeven binnen het zichtbare deel van het scherm. Terwijl de gebruiker naar beneden scrolt, blijft de koptekst stilstaan en biedt zo consistente visuele aanwijzingen voor navigatie en interactie met andere elementen op de site.
Uw browser ondersteunt de videotag niet.
Mogelijke stapelproblemen aanpakken
Om te voorkomen dat de sticky header wordt verborgen door andere elementen op de pagina, wordt aanbevolen de CSS z-index eigenschap te gebruiken. Dit zorgt ervoor dat de koptekst altijd zichtbaar blijft en op de aangewezen positie blijft staan.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
Neem de eigenschap slank scrollen op in de HTML-tag om de algehele gebruikerservaring op een elegante manier te verbeteren:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
Het scrollen van deze pagina is geoptimaliseerd zodat het naadloos en vloeiend overgaat tussen verschillende secties, wat een prettigere gebruikerservaring oplevert.
Uw browser ondersteunt de videotag niet.
Webnavigatie verbeteren met CSS Sticky Headers
Het opnemen van een persistente header in je webontwerp kan de algehele gebruikerservaring aanzienlijk verbeteren. Hierdoor blijven bezoekers op de hoogte van het primaire navigatiemenu, wordt een uniforme merkidentiteit gehandhaafd en ziet uw site er up-to-date uit.
Door gebruik te maken van de mogelijkheden van CSS is het bereiken van dit resultaat zowel moeiteloos als indrukwekkend. De voortdurende aanwezigheid van een vaste header kan zeer voordelig zijn in verschillende sectoren vanwege de blijvende relevantie in webdesigntrends ondanks schommelingen in de tijd.