BS Scrollspy
Scrollspy plagini
Scrollspy plagini aylantirish holatiga qarab navigatsiya ro‘yxatidagi havolalarni 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-inverse navbar-fixed-top">
...
<ul class="nav 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 (relative positioning) talab qilinadi: data-spy="scroll" atributiga ega element to‘g‘ri ishlashi uchun CSS position xususiyatining qiymati "relative" bo‘lishi kerak.
Scrollspy bilan vertikal menyu
Ushbu misolda menyu sifatida Bootstrap’ning vertikal navigatsiya pill’laridan foydalanamiz:
Misol
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
O‘zingiz sinab ko‘ring »
Bootstrap scrollspy bo‘yicha to‘liq ma’lumotnoma
Scrollspy’ning barcha metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Scrollspy ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!