Dosiahnutie tejto efektívnej a výkonnej techniky je oveľa jednoduchšie, ako by ste čakali.

Vo webovom dizajne je lepkavá hlavička výkonným nástrojom, ktorý zlepšuje používateľskú skúsenosť a navigáciu. Keď používatelia posúvajú webovú stránku nadol, lepiaca hlavička zostáva viditeľná, čo zaisťuje, že základné navigačné odkazy sú vždy dostupné. Poďme sa ponoriť do zložitosti vytvárania lepiacej hlavičky pomocou CSS.

Čo použiť lepiacu hlavičku?

Nalepovacia hlavička zostane na webovej stránke na jednom mieste, aj keď používateľ roluje. Predovšetkým špecifické vlastnosti CSS pozícia: lepkavá, vám pomôže dosiahnuť toto správanie. Medzi výhody lepivej hlavičky patrí lepšia používateľská skúsenosť a jednoduchá navigácia na webe.

  • Používatelia môžu ľahko pristupovať k hlavným navigačným odkazom bez posúvania na začiatok.
  • Logo alebo názov značky zostáva viditeľný, čím sa posilňuje identita značky.
  • Lepiaca hlavička môže ušetriť miesto odstránením navigácie na bočnom paneli a ponechaním väčšieho priestoru pre obsah.
instagram viewer

Návrh hlavičky: Štruktúra HTML

Základom každej lepivej hlavičky je jej HTML štruktúra. Tu je návod, ako vytvoriť potrebné prvky HTML pre vašu lepiacu hlavičku.

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

Táto štruktúra používa hlavičku, ktorá obsahuje logo a navigačný prvok s neusporiadaným zoznamom navigačných odkazov. Potom používa hlavnú značku a niekoľko značiek sekcií na reprezentáciu každej sekcie na stránke. Stránka momentálne vyzerá takto:

Položenie základov pomocou CSS

Kód CSS uvedený nižšie používa vlastnosti krabicového modelu ako výplň, okraj a flexbox na vytvorenie atraktívneho dizajnu s výškou každej zástupnej časti.

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

Stránka by teraz mala vyzerať takto:

Implementácia efektu Sticky: CSS

V súčasnosti si pri posúvaní stránky nadol všimnete, že hlavička sa presunie mimo obrazovku. Ak to chcete opraviť, použite vlastnosť CSS position a nastavte hlavičku na lepkavú.

Táto vlastnosť sa správa ako kombinácia relatívneho a pevného umiestnenia v závislosti od pozície rolovania používateľa.

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

Nastavenie lepiacej hlavičky zaistí, že sa prilepí na miesto na stránke bez ohľadu na rolovanie. Vlastnosť top určuje, kde na stránke má byť hlavička umiestnená. Teraz posúvaním stránky nadol získate:

Riešenie potenciálnych problémov so stohovaním

Niekedy sa iné prvky na stránke môžu prekrývať s lepiacou hlavičkou. Ak chcete zabezpečiť, aby hlavička zostala navrchu, môžete pridať vlastnosť z-index:

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

Nakoniec pridajte do prvku HTML vlastnosť hladkého posúvania, aby ste získali krajší používateľský zážitok:

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

Stránka by sa teraz mala plynulo posúvať medzi sekciami:

Zlepšite webovú navigáciu pomocou CSS Sticky Headers

Pridanie lepiacej hlavičky do dizajnu vašej webovej stránky môže výrazne zlepšiť používateľskú skúsenosť. Táto funkcia udržiava používateľov pripojených k hlavnej ponuke, zachováva konzistentnú značku a dodáva vašej webovej stránke moderný vzhľad.

Vďaka sile CSS je vytvorenie tohto efektu jednoduché a efektívne. Trendy webového dizajnu sa časom menia, ale lepiaca hlavička je vždy užitočná pre rôzne odvetvia.