Denne effektive og kraftige teknikken er mye lettere å oppnå enn du kanskje forventer.

I webdesign er en sticky header et kraftig verktøy som forbedrer brukeropplevelsen og navigasjonen. Når brukere ruller nedover en nettside, forblir en klebrig overskrift synlig, noe som sikrer at viktige navigasjonslenker alltid er tilgjengelige. La oss fordype oss i vanskelighetene ved å bygge en sticky header ved hjelp av CSS.

Hva bruker en Sticky Header?

En klebrig overskrift forblir på ett sted på en nettside, selv når brukeren ruller. Spesifikke CSS-egenskaper, primært stilling: klissete, vil hjelpe deg å oppnå denne oppførselen. Noen fordeler med å ha en klebrig overskrift inkluderer en forbedret brukeropplevelse og enkel nettsidenavigering.

  • Brukere kan enkelt få tilgang til hovednavigasjonslenkene uten å rulle til toppen.
  • Logoen eller merkenavnet forblir synlig, og styrker merkeidentiteten.
  • En klebrig overskrift kan spare plass ved å fjerne sidefeltnavigering, og gi mer plass til innhold.

Designe overskriften: HTML-struktur

instagram viewer

Grunnlaget for enhver klebrig overskrift er HTML-strukturen. Slik lager du de nødvendige HTML-elementene for den klebrige overskriften.

<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 strukturen bruker en overskrift som inneholder logoen og et nav-element med en uordnet liste over navigasjonslenker. Den bruker deretter en hovedkode og flere seksjonskoder for å representere hver seksjon på siden. For øyeblikket ser siden slik ut:

Legger grunnlaget med CSS

CSS-koden nedenfor bruker boksmodellegenskaper som polstring, margin og flexbox for å skape et attraktivt design, med en høyde for hver plassholderseksjon.

@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 skal nå se slik ut:

Implementering av Sticky Effect: CSS

For øyeblikket, når du ruller nedover siden, vil du legge merke til at overskriften beveger seg fra skjermen. For å fikse dette, bruk CSS-posisjonsegenskapen og sett overskriften til klebrig.

Denne egenskapen oppfører seg som en kombinasjon av relativ og fast plassering, avhengig av brukerens rulleposisjon.

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

Hvis du setter overskriften til klebrig, sikrer du at den holder seg til en posisjon på siden uavhengig av rullingen. Toppegenskapen angir hvor på siden overskriften skal plasseres. Når du ruller nedover siden, får du:

Løsning av potensielle stablingsproblemer

Noen ganger kan andre elementer på siden overlappe med den klebrige overskriften. For å sikre at overskriften forblir øverst, kan du legge til z-index-egenskapen:

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

Til slutt, legg til egenskapen for jevn rulling til HTML-elementet for en bedre brukeropplevelse:

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

Siden skal nå rulle jevnt mellom seksjoner:

Økende nettnavigering med CSS-klistrehoder

Å legge til en selvklebende overskrift til nettstedets design kan forbedre brukeropplevelsen betraktelig. Denne funksjonen holder brukere koblet til hovedmenyen, opprettholder et konsistent merke og gir nettstedet ditt et moderne utseende.

Med kraften til CSS er det enkelt og effektivt å skape denne effekten. Nettdesigntrender endres over tid, men den klebrige overskriften er alltid nyttig for forskjellige bransjer.