Denne effektive og kraftfulde teknik er meget nemmere at opnå, end du måske forventer.

I webdesign er en sticky header et kraftfuldt værktøj, der forbedrer brugeroplevelsen og navigationen. Når brugerne ruller ned på en webside, forbliver en klæbrig overskrift synlig, hvilket sikrer, at vigtige navigationslinks altid er tilgængelige. Lad os dykke ned i forviklingerne ved at bygge en sticky header ved hjælp af CSS.

Hvad bruger en Sticky Header?

En sticky header forbliver ét sted på en webside, selv når brugeren ruller. Specifikke CSS-egenskaber, primært stilling: klæbrig, vil hjælpe dig med at opnå denne adfærd. Nogle fordele ved at have en sticky header inkluderer en forbedret brugeroplevelse og nem hjemmesidenavigation.

  • Brugere kan nemt få adgang til de vigtigste navigationslinks uden at rulle til toppen.
  • Logoet eller mærkenavnet forbliver synligt, hvilket styrker mærkeidentiteten.
  • En sticky header kan spare plads ved at fjerne sidebar navigation, hvilket giver mere plads til indhold.
instagram viewer

Design af headeren: HTML-struktur

Grundlaget for enhver sticky header er dens HTML-struktur. Sådan opretter du de nødvendige HTML-elementer til din sticky header.

<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>

Denne struktur bruger en header, der indeholder logoet og et nav-element med en uordnet liste over navigationslinks. Den bruger derefter et hovedtag og flere sektionstags til at repræsentere hver sektion på siden. I øjeblikket ser siden sådan ud:

Grundlæggende med CSS

CSS-koden nedenfor bruger kassemodelegenskaber som polstring, margin og flexbox for at skabe et attraktivt design med en højde for hver pladsholdersektion.

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

Siden skulle nu se sådan ud:

Implementering af Sticky Effect: CSS

I øjeblikket, når du ruller ned på siden, vil du bemærke, at overskriften flyttes væk fra skærmen. For at rette dette, brug egenskaben CSS position og sæt overskriften til sticky.

Denne egenskab opfører sig som en kombination af relativ og fast positionering, afhængigt af brugerens rulleposition.

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

Indstilling af overskriften til klæbrig sikrer, at den klæber til en position på siden uanset rullen. Den øverste egenskab angiver, hvor på siden headeren skal placeres. Nu, når du ruller ned på siden, giver det:

Løsning af potentielle stablingsproblemer

Nogle gange kan andre elementer på siden overlappe med den klæbende overskrift. For at sikre, at overskriften forbliver øverst, kan du tilføje z-index egenskaben:

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

Tilføj endelig den glatte rulleegenskab til HTML-elementet for en bedre brugeroplevelse:

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

Siden skulle nu rulle jævnt mellem sektioner:

Forbedring af webnavigation med CSS Sticky Headers

Tilføjelse af en sticky header til dit webstedsdesign kan i høj grad forbedre brugeroplevelsen. Denne funktion holder brugerne forbundet til hovedmenuen, opretholder et konsistent brand og giver dit websted et moderne udseende.

Med kraften i CSS er det ligetil og effektivt at skabe denne effekt. Webdesigntendenser ændrer sig over tid, men den klæbrige overskrift er altid nyttig for forskellige brancher.