Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Scrollspy plugin ကို scroll position ကိုအခြေခံ၍ လမ်းကြောင်းပြစာရင်းတစ်ခုရှိလင့်ခ်များကိုအလိုအလျောက် update လုပ်ရန်အသုံးပြုသည်။
Scrollspy အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Scrollspy Tutorial ကို ဖတ်ရှုပါ ။
အကြံပြုချက်- Scrollspy plugin ကို Affix ပလပ်အင်နှင့် မကြာခဏ တွဲသုံး ပါသည်။
data-* Attributes မှတဆင့်
ရွှေ့နိုင်သော ဧရိယာအဖြစ် အသုံးပြုသင့်သည့် ဒြပ်စင်သို့ ပေါင်းထည့်ပါ data-spy="scroll"(မကြာခဏ ဤအရာသည် <body>ဒြပ်စင်ဖြစ်သည်)။
ထို့နောက် data-targetid တန်ဖိုး သို့မဟုတ် လမ်းကြောင်းပြဘား၏ အတန်းအမည် ( .navbar) ဖြင့် အရည်အချင်းကို ထည့်ပါ။ ၎င်းသည် navbar ကို ရွှေ့နိုင်သော ဧရိယာနှင့် ချိတ်ဆက်ထားကြောင်း သေချာစေရန် ဖြစ်သည်။
လှိမ့်နိုင်သောဒြပ်စင်များသည် navbar ၏စာရင်းအတွင်းရှိ လင့်ခ်များ၏ ID နှင့် ကိုက်ညီရမည်ကို <div id="section1">သတိပြုပါ <a href="#section1">။
ရွေးချယ်နိုင်သော data-offsetရည်ညွှန်းချက်သည် လှိမ့်၏အနေအထားကို တွက်ချက်သည့်အခါ အပေါ်မှနေ၍ offset လုပ်မည့် pixels အရေအတွက်ကို သတ်မှတ်ပေးပါသည်။ navbar အတွင်းရှိ လင့်ခ်များသည် လှုပ်ရှားနိုင်သော အခြေအနေသို့ အမြန်ပြောင်းရန် သို့မဟုတ် စောလွန်းသည်ဟု သင်ခံစားရသောအခါ ၎င်းသည် အသုံးဝင်သည်။ မူရင်းမှာ 10 pixels ဖြစ်သည်။
နှိုင်းရနေရာချထားခြင်း လိုအပ်သည်- data-spy="scroll" ပါရှိသော ဒြပ်စင်သည် ကောင်းမွန်စွာအလုပ်လုပ်ရန် "ဆွေမျိုး" တန်ဖိုးဖြင့် CSS ရာထူး ပိုင်ဆိုင်မှုကို လိုအပ်သည်။
ဥပမာ
<!-- 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>
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
ဥပမာ
$('body').scrollspy({target: ".navbar"})
Scrollspy ရွေးစရာများ
ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-offset="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Scrollspy နည်းလမ်းများ
အောက်ပါဇယားတွင် ရရှိနိုင်သော scrollspy နည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy ဖြစ်ရပ်များ
အောက်ပါဇယားသည် ရနိုင်သော scrollspy ဖြစ်ရပ်များအားလုံးကို စာရင်းပြုစုထားသည်။
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
နောက်ထပ် ဥပမာများ
လှုပ်ရှားသက်ဝင်နေသော လျှောလိပ်ဖြင့် Scrollspy
တူညီသောစာမျက်နှာရှိ ကျောက်ဆူးတစ်ခုသို့ ချောမွေ့သော စာမျက်နှာကို မည်ကဲ့သို့ ထည့်သွင်းနည်း-
ချောမွေ့စွာ ရွေ့လျားခြင်း။
// 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
});
Scrollspy & Affix
Scrollspy ပလပ်အင်နှင့်အတူ Affix ပလပ်အင် ကို အသုံးပြုခြင်း -
အလျားလိုက် မီနူး (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>
ဒေါင်လိုက် မီနူး (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>