Yopishqoq navigatsiya paneli
CSS yordamida "yopishqoq" (sticky) navigatsiya panelini yaratishni o‘rganing.
Yopishqoq (sticky) navigatsiya paneli qanday yaratiladi
1-qadam) HTML qo‘shing:
Navigatsiya panelini yarating:
Misol
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
2-qadam) CSS qo‘shing:
Navigatsiya paneliga uslub bering; sahifa uning joylashgan o‘rnigacha aylantirilganda panel yopishib qolishi uchun position:sticky va top:0 qo‘shing:
Misol
/* Style the navbar */
#navbar {
position: sticky;
top: 0;
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding: 16px;
}
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!