BS4 Scrollspy
Bootstrap 4 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-spy="scroll" data-target=".navbar" data-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-spy="scroll" ni qo‘shing.
So‘ngra navigatsiya panelining id’si yoki klass nomini qiymat sifatida olgan data-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-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-spy="scroll" atributiga ega element to‘g‘ri ishlashi uchun CSS position xususiyatining qiymati "relative" bo‘lishi kerak.
Scrollspy vertikal menyusi
Ushbu misolda menyu sifatida Bootstrap’ning vertikal navigatsiya pill’laridan foydalanamiz:
Misol
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
O‘zingiz sinab ko‘ring »
Bootstrap Scrollspy bo‘yicha to‘liq ma’lumotnoma
Barcha scrollspy parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap JS Scrollspy ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!