Hur man bygger en sticky header med CSS

Maya Patel included in Programming Web Design Css

2023-10-31 738 words 4 minutes

Contents

Inom webbdesign är en sticky header ett kraftfullt verktyg som förbättrar användarupplevelsen och navigeringen. När användarna bläddrar nedåt på en webbsida förblir en sticky header synlig, vilket säkerställer att viktiga navigeringslänkar alltid är tillgängliga. Låt oss titta närmare på hur man bygger en sticky header med hjälp av CSS.

En ihållande rubrik som förblir fixerad på en viss plats på en webbsida kallas en “sticky header”. För att skapa en sådan funktion används specifika CSS-egenskaper, t.ex. egenskapen “position” med värdet “stick

Användare kan enkelt läsa de primära navigeringslänkarna utan att behöva bläddra tillbaka upp till toppen av sidan, vilket ger dem sömlös och bekväm navigering genom hela deras upplevelse på vår webbplats.

Logotypen och varumärket visas på ett framträdande sätt, vilket bevarar varumärkets särskiljande karaktär.

Ett visuellt tilltalande och funktionellt designval är att införliva en sticky header som eliminerar behovet av en överdriven mängd sidofältnavigering och därigenom skapar ytterligare yta för visning av relevant innehåll på en webbsida.

Utformning av sidhuvudet: HTML-struktur

Hörnstenen i en effektiv sticky header ligger i dess HTML-arkitektur. Följ dessa steg för att skapa de nödvändiga HTML-elementen för att konstruera de viktigaste komponenterna i en 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 aktuella designen använder en headerkomponent som innehåller företagets emblem tillsammans med ett navigeringselement med en ordnad lista över hyperlänkar. Därefter används ett primärt hölje och flera segmenteringshöljen för att illustrera varje uppdelning inom innehållsområdet. För närvarande visas webbsidan på följande sätt:

Lägga grunden med CSS

CSS använder olika boxmodellattribut som padding, margin och flexbox för att skapa en visuellt tilltalande layout, där enskilda sektioner tilldelas en enhetlig höjd.

 @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 bör nu se ut så här:

Implementering av Sticky-effekten: CSS

För att åtgärda problemet med att sidhuvudet flyttas från skärmen när du rullar nedåt på sidan, använd CSS position -egenskapen och konfigurera sidhuvudet som ett “sticky”-element.

Den här egenskapen uppvisar egenskaper som påminner om både relativ och fast positionering, med avseende på användarens scrollposition.

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

Ett sätt att säkerställa att sidhuvudet är synligt och tillgängligt när användaren navigerar genom innehållet på webbsidan är att ange en fast position i förhållande till visningsfönstret. Genom att ange värdet för top-egenskapen i pixlar eller procent kan utvecklaren styra exakt var sidhuvudet ska visas inom den synliga delen av skärmen. När användaren bläddrar nedåt på sidan förblir sidhuvudet stillastående, vilket ger konsekventa visuella signaler för navigering och interaktion med andra element på webbplatsen.

Din webbläsare stöder inte videotaggen.

Åtgärda potentiella staplingsproblem

För att förhindra att det klibbiga sidhuvudet skyms av andra element på sidan rekommenderas att du använder CSS z-index -egenskapen. Detta säkerställer att sidhuvudet förblir synligt och förblir i sin angivna position hela tiden.

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

Införliva det eleganta rullningsattributet i HTML-taggen för att förbättra den övergripande användarupplevelsen på ett elegant sätt:

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

Rullningen på den här sidan har optimerats för att vara sömlös och flytande när den övergår mellan olika avsnitt, vilket ger en mer njutbar användarupplevelse.

Din webbläsare stöder inte videotaggen.

Förbättra webbnavigeringen med CSS Sticky Headers

Att integrera en persistent header i din webbdesign kan avsevärt förbättra den övergripande användarupplevelsen. Det gör det möjligt för besökare att hålla koll på den primära navigeringsmenyn, upprätthåller en enhetlig varumärkesidentitet och ger webbplatsen ett uppdaterat utseende.

Genom att använda CSS-funktionerna är det både enkelt och effektfullt att uppnå detta resultat. Att alltid ha ett fast sidhuvud kan vara mycket fördelaktigt inom olika sektorer på grund av dess bestående relevans i webbdesigntrender trots fluktuationer över tiden.