JS Scrollspy
JS Scrollspy (scrollspy.js)
Scrollspy plagini aylantirish holatiga qarab navigatsiya ro‘yxatidagi havolalarni avtomatik ravishda yangilash uchun ishlatiladi.
Scrollspy bo‘yicha darslik uchun Bootstrap Scrollspy darsligimizni o‘qing.
Maslahat: Scrollspy plagini ko‘pincha Affix plagini bilan birga ishlatiladi.
data-* atributlari orqali
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.
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 »
JavaScript orqali
Qo‘lda quyidagicha yoqing:
Scrollspy parametrlari
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-offset="".
| Nomi | Tipi | Default | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| offset | number | 10 | Aylantirish (scroll) holatini hisoblashda yuqoridan necha piksel siljish (offset) olinishini belgilaydi | Sinab ko‘ring |
Scrollspy metodlari
Quyidagi jadvalda barcha mavjud scrollspy metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .scrollspy("refresh") | Scrollspy’ga elementlar qo‘shilganda yoki undan olib tashlanganda hujjatni yangilash uchun ushbu metoddan foydalanish mumkin | Sinab ko‘ring |
Scrollspy hodisalari
Quyidagi jadvalda barcha mavjud scrollspy hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| activate.bs.scrollspy | Scrollspy tomonidan yangi element faollashtirilganda sodir bo‘ladi | Sinab ko‘ring |
Ko‘proq misollar
Animatsiyali aylantirishga ega Scrollspy
Xuddi shu sahifadagi langarga (anchor) sahifani silliq aylantirishni qanday qo‘shish mumkin:
Silliq aylantirish
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
O‘zingiz sinab ko‘ring »
Scrollspy va Affix
Affix plaginidan Scrollspy plagini bilan birga foydalanish:
Gorizontal menyu (navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
O‘zingiz sinab ko‘ring »
Vertikal menyu (yon navigatsiya — sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!