Yopishqoq (sticky) sarlavha qismi
CSS yordamida sahifa aylantirilganda qotirilgan/yopishqoq (sticky) sarlavha qismini (header) yaratishni o‘rganing.
Aylantirishda qotirilgan sarlavha qismi (header) qanday yaratiladi
1-qadam) HTML qo‘shing:
Misol
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
2-qadam) CSS qo‘shing:
Sarlavha qismini bezang; aylantirish jarayonida uning joyiga yetganda header yopishib qolishi uchun position:sticky va top:0 qo‘shing:
Misol
.header {
position: sticky;
top: 0;
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
O‘zingiz sinab ko‘ring »
position: sticky; bo‘lgan element foydalanuvchining aylantirish (scroll) holatiga qarab joylashtiriladi.
Yopishqoq element aylantirish holatiga qarab relative va fixed o‘rtasida almashadi. U ko‘rinish maydonida (viewport) berilgan siljish nuqtasiga yetguncha relative tarzda joylashadi — so‘ngra o‘z joyiga "yopishib qoladi" (position:fixed kabi).
Eslatma: Sticky joylashuv ishlashi uchun top, right, bottom yoki left dan kamida bittasini ko‘rsatishingiz shart.
CSS’da joylashtirish haqida ko‘proq bilish uchun CSS Position darsligimizni o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!