Bootstrap 4 Scrollspy (အဆင့်မြင့်)
Bootstrap 4 Scrollspy
Scrollspy ကို scroll position ကိုအခြေခံ၍ လမ်းကြောင်းပြစာရင်းတစ်ခုရှိ လင့်ခ်များကို အလိုအလျောက် အပ်ဒိတ်လုပ်ရန် အသုံးပြု ပါသည်။
Scrollspy ဖန်တီးနည်း
အောက်ဖော်ပြပါ ဥပမာသည် scrollspy ဖန်တီးနည်းကို ပြသည်-
ဥပမာ
<!-- 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>
နမူနာရှင်းပြထားပါတယ်။
ရွှေ့နိုင်သော ဧရိယာအဖြစ် အသုံးပြုသင့်သည့် ဒြပ်စင်သို့ ပေါင်းထည့်ပါ data-spy="scroll"
(မကြာခဏ ဤအရာသည် <body>
ဒြပ်စင်ဖြစ်သည်)။
ထို့နောက် data-target
id တန်ဖိုး သို့မဟုတ် လမ်းကြောင်းပြဘား၏ အတန်းအမည် ( .navbar
) ဖြင့် အရည်အချင်းကို ထည့်ပါ။ ၎င်းသည် navbar ကို ရွှေ့နိုင်သော ဧရိယာနှင့် ချိတ်ဆက်ထားကြောင်း သေချာစေရန် ဖြစ်သည်။
လှိမ့်နိုင်သောဒြပ်စင်များသည် navbar ၏စာရင်းအတွင်းရှိ လင့်ခ်များ၏ ID နှင့် ကိုက်ညီရမည်ကို <div id="section1">
သတိပြုပါ <a href="#section1">
။
ရွေးချယ်နိုင်သော data-offset
ရည်ညွှန်းချက်သည် လှိမ့်၏အနေအထားကို တွက်ချက်သည့်အခါ အပေါ်မှနေ၍ offset လုပ်မည့် pixels အရေအတွက်ကို သတ်မှတ်ပေးပါသည်။ navbar အတွင်းရှိ လင့်ခ်များသည် လှုပ်ရှားနိုင်သော အခြေအနေသို့ အမြန်ပြောင်းရန် သို့မဟုတ် စောလွန်းသည်ဟု သင်ခံစားရသောအခါ ၎င်းသည် အသုံးဝင်သည်။ မူရင်းမှာ 10 pixels ဖြစ်သည်။
နှိုင်းရနေရာချထားခြင်း လိုအပ်သည်- data-spy="scroll" ပါရှိသော ဒြပ်စင်သည် ကောင်းမွန်စွာအလုပ်လုပ်ရန် "ဆွေမျိုး" တန်ဖိုးဖြင့် CSS ရာထူး ပိုင်ဆိုင်မှုကို လိုအပ်သည်။
Scrollspy ဒေါင်လိုက် မီနူး
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် Bootstrap ၏ဒေါင်လိုက်လမ်းညွှန်ဆေးများကို မီနူးအဖြစ်အသုံးပြုသည်-
ဥပမာ
<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>
Bootstrap Scrollspy ကိုးကားချက်ကို အပြီးသတ်ပါ။
scrollspy ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Scrollspy Reference သို့ သွားပါ ။