Această tehnică eficientă și puternică este mult mai ușor de realizat decât v-ați aștepta.

În designul web, un antet lipicios este un instrument puternic care îmbunătățește experiența utilizatorului și navigarea. Pe măsură ce utilizatorii derulează în jos pe o pagină web, un antet lipicios rămâne vizibil, asigurându-se că linkurile de navigare esențiale sunt întotdeauna accesibile. Să ne aprofundăm în complexitatea construirii unui antet lipicios folosind CSS.

La ce folosește un antet lipicios?

Un antet lipicios rămâne într-un singur loc pe o pagină web, chiar și atunci când utilizatorul derulează. Proprietăți specifice CSS, în primul rând poziție: lipicioasă, vă va ajuta să obțineți acest comportament. Unele beneficii ale unui antet lipicios includ o experiență îmbunătățită a utilizatorului și o navigare ușoară pe site.

  • Utilizatorii pot accesa cu ușurință legăturile principale de navigare fără a derula în partea de sus.
  • Logo-ul sau numele mărcii rămân vizibile, întărind identitatea mărcii.
  • Un antet lipicios poate economisi spațiu eliminând navigarea din bara laterală, lăsând mai mult spațiu pentru conținut.

Proiectarea antetului: Structura HTML

Fundamentul oricărui antet lipicios este structura sa HTML. Iată cum să creați elementele HTML necesare pentru antetul dvs. lipicios.

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

Această structură folosește un antet care conține sigla și un element de navigare cu o listă neordonată de legături de navigare. Apoi folosește o etichetă principală și mai multe etichete de secțiune pentru a reprezenta fiecare secțiune de pe pagină. Momentan pagina arata asa:

Punerea bazei cu CSS

Codul CSS de mai jos folosește proprietățile modelului de cutie cum ar fi umplutura, marginea și caseta flexibilă pentru a crea un design atractiv, cu o înălțime pentru fiecare secțiune de substituent.

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

Pagina ar trebui să arate acum astfel:

Implementarea efectului lipicios: CSS

În prezent, când derulați în jos în pagină, veți observa că antetul se mută în afara ecranului. Pentru a remedia acest lucru, utilizați proprietatea poziției CSS și setați antetul la lipicios.

Această proprietate se comportă ca o combinație de poziționare relativă și fixă, în funcție de poziția de defilare a utilizatorului.

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

Setarea antetului la lipicios asigură că acesta rămâne într-o poziție pe pagină, indiferent de defilare. Proprietatea de sus specifică locul în care ar trebui plasat antetul pe pagină. Acum, derulând în jos pagina rezultă:

Abordarea potențialelor probleme de stivuire

Uneori, alte elemente de pe pagină se pot suprapune cu antetul lipicios. Pentru a vă asigura că antetul rămâne în partea de sus, puteți adăuga proprietatea z-index:

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

În cele din urmă, adăugați proprietatea de defilare fluidă la elementul HTML pentru o experiență mai plăcută pentru utilizator:

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

Pagina ar trebui acum să defileze fără probleme între secțiuni:

Creșterea navigației web cu anteturi CSS Sticky

Adăugarea unui antet lipicios la designul site-ului dvs. poate îmbunătăți considerabil experiența utilizatorului. Această funcție menține utilizatorii conectați la meniul principal, menține o marcă consistentă și oferă site-ului dvs. un aspect modern.

Cu puterea CSS, crearea acestui efect este simplă și eficientă. Tendințele de design web se schimbă în timp, dar antetul lipicios este întotdeauna util pentru diferite industrii.