Ovu učinkovitu i moćnu tehniku ​​puno je lakše postići nego što biste očekivali.

U web dizajnu, ljepljivo zaglavlje moćan je alat koji poboljšava korisničko iskustvo i navigaciju. Dok se korisnici pomiču prema dolje web stranicom, ljepljivo zaglavlje ostaje vidljivo, osiguravajući da su bitne veze za navigaciju uvijek dostupne. Zaronimo u zamršenost izrade ljepljivog zaglavlja pomoću CSS-a.

Za što se koristi ljepljivo zaglavlje?

Ljepljivo zaglavlje ostaje na jednom mjestu na web stranici, čak i kada se korisnik pomiče. Specifična CSS svojstva, prvenstveno položaj: ljepljiv, pomoći će vam da postignete ovo ponašanje. Neke prednosti ljepljivog zaglavlja uključuju poboljšano korisničko iskustvo i jednostavnu navigaciju web-stranicom.

  • Korisnici mogu jednostavno pristupiti glavnim navigacijskim vezama bez pomicanja na vrh.
  • Logo ili naziv marke ostaju vidljivi, pojačavajući identitet marke.
  • Ljepljivo zaglavlje može uštedjeti prostor uklanjanjem navigacije na bočnoj traci, ostavljajući više prostora za sadržaj.
instagram viewer

Dizajniranje zaglavlja: HTML struktura

Temelj svakog ljepljivog zaglavlja je njegova HTML struktura. Evo kako izraditi potrebne HTML elemente za vaše ljepljivo zaglavlje.

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

Ova struktura koristi zaglavlje koje sadrži logotip i navigacijski element s neuređenim popisom navigacijskih veza. Zatim koristi glavnu oznaku i nekoliko oznaka odjeljka za predstavljanje svakog odjeljka na stranici. Trenutno stranica izgleda ovako:

Postavljanje temelja pomoću CSS-a

CSS kod u nastavku koristi svojstva okvirnog modela kao što su ispuna, margina i flexbox za stvaranje atraktivnog dizajna, s visinom za svaki odjeljak rezerviranog mjesta.

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

Stranica bi sada trebala izgledati ovako:

Implementacija Sticky Efekta: CSS

Trenutno, kada se pomičete prema dolje po stranici, primijetit ćete da se zaglavlje pomiče sa zaslona. Da biste to popravili, upotrijebite CSS svojstvo pozicije i postavite zaglavlje na ljepljivo.

Ovo se svojstvo ponaša kao kombinacija relativnog i fiksnog pozicioniranja, ovisno o položaju pomicanja korisnika.

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

Postavljanjem zaglavlja na ljepljivo osigurava se njegovo zadržavanje na mjestu na stranici bez obzira na pomicanje. Svojstvo top određuje gdje na stranici treba postaviti zaglavlje. Sada, pomicanjem stranice prema dolje dobivate:

Rješavanje potencijalnih problema sa slaganjem

Ponekad se drugi elementi na stranici mogu preklapati s ljepljivim zaglavljem. Kako biste osigurali da zaglavlje ostane na vrhu, možete dodati svojstvo z-index:

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

Na kraju, dodajte svojstvo glatkog pomicanja u HTML element za ljepše korisničko iskustvo:

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

Stranica bi se sada trebala glatko pomicati između odjeljaka:

Unapređivanje web navigacije pomoću CSS ljepljivih zaglavlja

Dodavanje ljepljivog zaglavlja dizajnu vaše web stranice može uvelike poboljšati korisničko iskustvo. Ova značajka održava povezanost korisnika s glavnim izbornikom, održava dosljednu marku i daje vašoj web stranici moderan izgled.

Uz snagu CSS-a, stvaranje ovog efekta je jednostavno i učinkovito. Trendovi web dizajna mijenjaju se tijekom vremena, ali ljepljivo zaglavlje uvijek je korisno za različite industrije.