Sticky header β bu sahifa pastga scroll bo'lganda ham yuqorida turadigan navigation menyu. Klassik header foydalanuvchi pastga scroll qilsa ko'rinmay qoladi. Sticky header har doim qoladi. Bu UX'da katta yaxshilanish β foydalanuvchi har vaqt asosiy navigatsiyaga ega. Tadqiqotlar: sticky header pages per session'ni 22% oshiradi.
Sticky vs Fixed vs Static
Static header β klassik. Sahifa scroll bo'lsa, header yuqoriga ketadi. CSS: position: static (default).
Fixed header β har doim ekranda. Sahifa scroll bo'lsa ham yuqorida. CSS: position: fixed; top: 0.
Sticky header β kombinatsiya. Boshida static, foydalanuvchi scroll qilgach fixed bo'ladi. CSS: position: sticky; top: 0.
Sticky vs Fixed farqi
Fixed har doim ko'rinarli. Sticky scroll bo'lguncha klassik joylashishda, scroll bo'lgach yuqoriga yopishadi.
Sticky UX yaxshiroq β foydalanuvchi sahifa boshida full hero ko'radi (header ortig'ini olmaydi), pastga scroll qilgach sticky aktivlashadi.
CSS implementatsiyasi
Eng oddiy sticky header:
.header {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
z-index yuqori bo'lishi shart β boshqa kontent ustida ko'rinish uchun. Background oq yoki neutral β fon orqali ko'rinmasin.
Smart sticky header
Modern yondashuv: scroll up bo'lganda ko'rsatish, scroll down bo'lganda yashirish.
Foydalanuvchi yuqoriga scroll qilsa β \"navigatsiya kerak\" deb hisoblanadi. Pastga scroll qilsa β \"kontent o'qish\", header keraksiz.
JavaScript orqali implementatsiya. Header transform: translateY bilan show/hide.
Header balandligi
Sticky header sahifa o'rtasidan o'tkir balandlikda emas. Optimal 60-80px desktop, 50-60px mobile.
Balandroq sticky β kontent kam ko'rinadi. Pastroq β touch targets kichik.
Logo va navigation
Sticky header'da: logo chap, asosiy nav o'rtada yoki o'ngda, CTA o'ng burchakda.
Logo o'lcham kichikroq β sticky kichkina joy talab qiladi.
Search funksiyasi
Sticky header'da search icon β foydalanuvchi har vaqt qidirish mumkin.
Bosilganda search bar ochiladi (header kengayadi yoki dropdown).
Mobile sticky header
Mobile'da sticky ham foydali. Lekin header balandligi kichik β touch targets bilan ehtiyot.
Burger menu chap yoki o'ng. CTA tugmasi katta.
Transition animation
Header sticky'ga o'tganda subtle animation. Box-shadow qo'shilishi, background subtle o'zgarishi.
Foydalanuvchi vizual jihatdan o'zgarishni his etadi va header endi sticky deb biladi.
Mega menu va sticky
Sticky header'da mega menu β yana keyin batafsil ko'rib chiqamiz. Sticky bilan birga ishlasa, foydalanuvchi har vaqt menu accessga ega.
Hero va sticky
Hero katta bo'lsa, sticky header hero ustida ko'rinmaslik kerak. Sticky faqat hero tugagach aktivlashish.
Strategiya: position: sticky ishlamaydi (chunki parent container ichida). Boshqa yondashuv: scroll listener bilan body class qo'shish (\"scrolled\") va header sticky bo'lishi.
Common sticky header xato
1. Header juda baland β kontent kam ko'rinadi.
2. z-index past β header'ga boshqa elementlar ustiga chiqadi.
3. Background shaffof β kontent header ortidan ko'rinadi, o'qish qiyin.
4. Sticky always (boshidan ham) β hero qisqarishi.
5. Mobile'da o'lchamlar to'g'ri emas.
Performance va sticky
Sticky JavaScript ishlatsa, scroll event listener performance'ga ta'sir qilishi mumkin.
Best practice: requestAnimationFrame, debounce, Intersection Observer API.
Accessibility va sticky
Sticky header keyboard navigation bilan to'g'ri ishlashi shart. Tab fokuslar sticky element'larga ham o'tishi.
Skip to main content link β birinchi tab. Foydalanuvchi sticky header'dan o'tib bevosita kontent'ga.
Sticky footer ham?
Sticky header foydali, sticky footer kamroq. Footer odatda dolzarb ma'lumotni saqlaydi (kontaktlar, link'lar) β sticky qilish keyingi qadam.
Mobile'da sticky CTA pastida foydali (e-commerce sotib olish tugmasi).
Sayt.uz sticky header
Sayt.uz sticky header: 70px balandlik desktop, 56px mobile. Logo chap, navigation o'rtada, til selector va login o'ng.
Smart sticky: scroll up bo'lsa ko'rsatish, scroll down bo'lsa yashirish. Foydalanuvchi yuqoriga harakat qilsa header darhol paydo bo'ladi.
Background oq, subtle box-shadow scroll bo'lgach qo'shiladi (vizual feedback).
Mobile: burger menu chap, logo o'rtada, CTA o'ng. Touch targets 48x48px.
Natija: pages per session 2.8 (sticky'siz 2.1 edi). Foydalanuvchi navigatsiya orqali ko'p sahifa ko'radi.