Denna effektiva och kraftfulla teknik är mycket lättare att uppnå än du kanske förväntar dig.

Inom webbdesign är en sticky header ett kraftfullt verktyg som förbättrar användarupplevelsen och navigeringen. När användare rullar ner på en webbsida förblir en klibbig rubrik synlig, vilket säkerställer att viktiga navigeringslänkar alltid är tillgängliga. Låt oss fördjupa oss i krångligheterna med att bygga en sticky header med CSS.

Vad använder du en Sticky Header?

En klibbig rubrik stannar på ett ställe på en webbsida, även när användaren rullar. Specifika CSS-egenskaper, i första hand position: klibbig, hjälper dig att uppnå detta beteende. Några fördelar med att ha en sticky header inkluderar en förbättrad användarupplevelse och enkel webbnavigering.

  • Användare kan enkelt komma åt de viktigaste navigeringslänkarna utan att rulla till toppen.
  • Logotypen eller varumärkesnamnet förblir synligt, vilket förstärker varumärkesidentiteten.
  • En klibbig rubrik kan spara utrymme genom att ta bort navigering i sidofältet, vilket ger mer utrymme för innehåll.
instagram viewer

Designa rubriken: HTML-struktur

Grunden för varje sticky header är dess HTML-struktur. Så här skapar du de nödvändiga HTML-elementen för 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>

Den här strukturen använder en rubrik som innehåller logotypen och ett navigeringselement med en oordnad lista med navigeringslänkar. Den använder sedan en huvudtagg och flera avsnittstaggar för att representera varje avsnitt på sidan. För tillfället ser sidan ut så här:

Att lägga grunden med CSS

CSS-koden nedan använder boxmodellens egenskaper som stoppning, marginal och flexbox för att skapa en attraktiv design, med en höjd för varje platshållarsektion.

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

Sidan ska nu se ut så här:

Implementera Sticky Effect: CSS

För närvarande, när du rullar ner på sidan, kommer du att märka att rubriken flyttas från skärmen. För att fixa detta, använd egenskapen CSS position och ställ in rubriken på sticky.

Den här egenskapen fungerar som en kombination av relativ och fast positionering, beroende på användarens rullningsposition.

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

Om du ställer in rubriken till klibbig säkerställer du att den fastnar på en position på sidan oavsett rullningen. Den översta egenskapen anger var på sidan rubriken ska placeras. När du nu rullar ner på sidan får du:

Ta itu med potentiella staplingsproblem

Ibland kan andra element på sidan överlappa den klibbiga rubriken. För att säkerställa att rubriken förblir överst kan du lägga till egenskapen z-index:

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

Lägg slutligen till egenskapen smidig rullning till HTML-elementet för en trevligare användarupplevelse:

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

Sidan bör nu rulla smidigt mellan avsnitten:

Upphöjande webbnavigering med CSS Sticky Headers

Att lägga till en klibbig rubrik till din webbdesign kan förbättra användarupplevelsen avsevärt. Den här funktionen håller användarna anslutna till huvudmenyn, upprätthåller ett konsekvent varumärke och ger din webbplats ett modernt utseende.

Med kraften i CSS är det enkelt och effektivt att skapa denna effekt. Webbdesigntrender förändras över tiden, men den klibbiga rubriken är alltid användbar för olika branscher.