Sticky joylashuv

CSS position: sticky

position: sticky; ega element scroll joylashuviga qarab relative va fixed joylashuv o‘rtasida almashadi.

Yopishqoq (sticky) element muayyan scroll joyiga yetguncha relative bo‘yicha joylashadi — so‘ng o‘sha joyda "yopishib qoladi" (position:fixed kabi).

Eslatma: sticky joylashtirish ishlashi uchun top, right, bottom yoki left xossalarining kamida bittasini belgilash shart.

Bu misolda sticky element sahifa tepasiga yetganda (top: 0), shu joyga yopishib qoladi:

div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

Sticky joylashtirish odatda quyidagilar uchun ishlatiladi:

Yopishqoq sarlavhalar — scroll qilishda tepaga yopishib qoladigan navigatsiya panellari
Yopishqoq yon panellar — asosiy kontent scroll qilinganda ko‘rinib turadigan yon kontent
Yopishqoq jadval sarlavhalari — uzun jadvallarni scroll qilishda ko‘rinib turadigan jadval sarlavhalari

sticky va fixed joylashuv o‘rtasidagi asosiy farqlar:

Feature	position: sticky	position: fixed
Initial behavior	Acts like `relative`	Doim viewport’ga nisbatan qotirilgan
Hujjatdagi joyi	Takes up space initially	Joy egallamaydi
Scroll behavior	Sticks after threshold	Always fixed
Container bound	Yes, respects parent boundaries	Yo‘q, doim viewport’ga nisbatan

Xususiyat	Tavsif
bottom	Joylashtirilgan quti uchun pastki chetini o‘rnatadi
clip	Absolyut joylashtirilgan elementni kesadi
left	Joylashtirilgan quti uchun chap chekka chekkasini o‘rnatadi
position	Element uchun joylashishni aniqlash turini belgilaydi
right	Joylashtirilgan quti uchun o‘ng chekka chekkasini o‘rnatadi
top	Joylashtirilgan quti uchun yuqori chekka chekkasini o‘rnatadi

Yutuqlaringizni kuzating – bu bepul!