BS5 Scrollspy
Scrollspy
Scrollspy navigatsiya ro‘yxatidagi havolalarni aylantirish (scroll) holatiga qarab avtomatik ravishda yangilash uchun ishlatiladi.
Scrollspy qanday yaratiladi
Quyidagi misolda scrollspy’ni qanday yaratish ko‘rsatilgan:
Misol
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
O‘zingiz sinab ko‘ring »
Misol tahlili
Aylantiriladigan maydon sifatida ishlatiladigan elementga (ko‘pincha bu <body> elementi bo‘ladi) data-bs-spy="scroll" ni qo‘shing.
So‘ngra navigatsiya panelining id’si yoki klass nomini qiymat sifatida olgan data-bs-target atributini qo‘shing (.navbar). Bu navigatsiya paneli aylantiriladigan maydon bilan bog‘langanligini ta’minlaydi.
E’tibor bering, aylantiriladigan elementlar navigatsiya paneli ro‘yxat elementlari ichidagi havolalarning ID’siga mos kelishi kerak (<div id="section1"> <a href="#section1"> ga mos keladi).
Ixtiyoriy data-bs-offset atributi aylantirish holatini hisoblashda yuqoridan necha piksel siljish (offset) olinishini belgilaydi. Bu aylantiriladigan elementlarga o‘tilganda navigatsiya panelidagi havolalar faol holatini juda erta o‘zgartirayotgandek tuyulsa, foydali bo‘ladi. Standart qiymat — 10 piksel.
Nisbiy joylashuv talab qilinadi: data-bs-spy="scroll" atributiga ega element to‘g‘ri ishlashi uchun CSS position xususiyatining qiymati "relative" bo‘lishi kerak.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!