Deze effectieve en krachtige techniek is een stuk gemakkelijker te bereiken dan je zou verwachten.

Bij webontwerp is een sticky header een krachtig hulpmiddel dat de gebruikerservaring en navigatie verbetert. Terwijl gebruikers door een webpagina scrollen, blijft een sticky header zichtbaar, zodat essentiële navigatielinks altijd toegankelijk zijn. Laten we ons verdiepen in de fijne kneepjes van het bouwen van een sticky header met behulp van CSS.

Wat gebruik ik van een sticky header?

Een sticky header blijft op één plek op een webpagina staan, zelfs als de gebruiker scrollt. Specifieke CSS-eigenschappen, voornamelijk positie: plakkerig, zal u helpen dit gedrag te bereiken. Enkele voordelen van het hebben van een sticky header zijn onder meer een verbeterde gebruikerservaring en eenvoudige websitenavigatie.

  • Gebruikers hebben eenvoudig toegang tot de belangrijkste navigatielinks zonder naar boven te scrollen.
  • Het logo of de merknaam blijft zichtbaar, waardoor de merkidentiteit wordt versterkt.
    • instagram viewer
  • Een sticky header kan ruimte besparen door de zijbalknavigatie te verwijderen, waardoor er meer ruimte overblijft voor inhoud.

De header ontwerpen: HTML-structuur

De basis van elke sticky header is de HTML-structuur. Hier leest u hoe u de benodigde HTML-elementen voor uw sticky header maakt.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Deze structuur gebruikt een header die het logo bevat en een nav-element met een ongeordende lijst met navigatielinks. Vervolgens wordt een hoofdtag en verschillende sectietags gebruikt om elke sectie op de pagina weer te geven. Op dit moment ziet de pagina er als volgt uit:

De basis leggen met CSS

De onderstaande CSS-code gebruikt eigenschappen van doosmodellen zoals opvulling, marge en flexbox om een ​​aantrekkelijk ontwerp te creëren, met een hoogte voor elk plaatsaanduidingsgedeelte.

@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; 
}


navul {
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 als volgt uit moeten zien:

Het plakkerige effect implementeren: CSS

Wanneer u momenteel naar beneden scrollt op de pagina, zult u merken dat de koptekst van het scherm verdwijnt. Gebruik om dit op te lossen de CSS-positie-eigenschap en zet de header op sticky.

Deze eigenschap gedraagt ​​zich als een combinatie van relatieve en vaste positionering, afhankelijk van de scrollpositie van de gebruiker.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Als u de koptekst op sticky zet, zorgt u ervoor dat deze op een positie op de pagina blijft hangen, ongeacht het scrollen. De bovenste eigenschap geeft aan waar op de pagina de koptekst moet worden geplaatst. Als u nu naar beneden scrollt op de pagina, krijgt u:

Potentiële stapelproblemen aanpakken

Soms overlappen andere elementen op de pagina de sticky header. Om ervoor te zorgen dat de header bovenaan blijft, kunt u de eigenschap z-index toevoegen:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Voeg ten slotte de eigenschap Smooth Scrolling toe aan het HTML-element voor een leukere gebruikerservaring:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

De pagina zou nu soepel tussen secties moeten scrollen:

Verbeterde webnavigatie met CSS Sticky Headers

Het toevoegen van een sticky header aan uw websiteontwerp kan de gebruikerservaring aanzienlijk verbeteren. Deze functie zorgt ervoor dat gebruikers verbonden blijven met het hoofdmenu, zorgt voor een consistent merk en geeft uw website een moderne uitstraling.

Met de kracht van CSS is het creëren van dit effect eenvoudig en effectief. Webontwerptrends veranderen in de loop van de tijd, maar de sticky header is altijd handig voor verschillende industrieën.