Hur man bygger en Sticky Header med CSS

Hur man bygger en Sticky Header med CSS
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

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.





vilken leveransapp betalar mest
Dagens video från MUO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL

Vad är 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. Följaktligen:



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

Några fördelar med att ha en sticky header inkluderar en förbättrad användarupplevelse och enkel webbnavigering.





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

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:



Sticky rubriklayout utan några stilar tillämpade

Att lägga grunden med CSS

CSS-koden nedan använder boxmodellegenskaper 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;  
} 
 
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; 
}

Sidan ska nu se ut så här:



Sidan efter att styling appliceras

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.