Ову ефикасну и моћну технику је много лакше постићи него што бисте очекивали.

У веб дизајну, лепљиво заглавље је моћан алат који побољшава корисничко искуство и навигацију. Док корисници померају веб страницу надоле, лепљиво заглавље остаје видљиво, осигуравајући да су кључне везе за навигацију увек доступне. Хајде да се удубимо у замршености прављења лепљивог заглавља помоћу ЦСС-а.

Шта користи лепљиво заглавље?

Лепљиво заглавље остаје на једном месту на веб страници, чак и када корисник скролује. Пре свега специфична својства ЦСС-а положај: лепљив, ће вам помоћи да постигнете ово понашање. Неке предности лепљивог заглавља укључују побољшано корисничко искуство и једноставну навигацију веб сајтом.

  • Корисници могу лако приступити главним везама за навигацију без померања до врха.
  • Лого или назив бренда остају видљиви, јачајући идентитет бренда.
  • Лепљиво заглавље може да уштеди простор уклањањем навигације бочне траке, остављајући више простора за садржај.

Дизајнирање заглавља: ​​ХТМЛ структура

instagram viewer

Основа сваког лепљивог заглавља је његова ХТМЛ структура. Ево како да креирате потребне ХТМЛ елементе за ваше лепљиво заглавље.

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

Ова структура користи заглавље које садржи лого и навигациони елемент са неуређеном листом навигационих веза. Затим користи главну ознаку и неколико ознака одељка за представљање сваког одељка на страници. У овом тренутку, страница изгледа овако:

Постављање темеља са ЦСС-ом

Доњи ЦСС код користи својства модела кутије као што су паддинг, маргина и флекбок за креирање атрактивног дизајна, са висином за сваки одељак чувара места.

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

Страница би сада требало да изгледа овако:

Примена лепљивог ефекта: ЦСС

Тренутно, када померате страницу надоле, приметићете да се заглавље помера са екрана. Да бисте ово поправили, користите својство ЦСС позиције и поставите заглавље на лепљиво.

Ово својство се понаша као комбинација релативног и фиксног позиционирања, у зависности од корисникове позиције померања.

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

Подешавање заглавља на лепљиво обезбеђује да се залепи за позицију на страници без обзира на померање. Својство топ одређује где на страници треба да се постави заглавље. Сада, померање странице надоле даје:

Рјешавање проблема потенцијалног слагања

Понекад се други елементи на страници могу преклапати са лепљивим заглављем. Да бисте осигурали да заглавље остане на врху, можете додати својство з-индек:

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

На крају, додајте својство глатког померања у ХТМЛ елемент за лепше корисничко искуство:

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

Страница би сада требало глатко да се помера између секција:

Подизање веб навигације помоћу ЦСС лепљивих заглавља

Додавање лепљивог заглавља у дизајн ваше веб странице може увелико побољшати корисничко искуство. Ова функција одржава кориснике повезане са главним менијем, одржава доследан бренд и даје вашој веб локацији модеран изглед.

Уз моћ ЦСС-а, стварање овог ефекта је једноставно и ефикасно. Трендови веб дизајна се временом мењају, али лепљиво заглавље је увек корисно за различите индустрије.