Bootstrap JS Affix
JS Affix (affix.js)
Affix ပလပ်အင်သည် စာမျက်နှာပေါ်ရှိ ဧရိယာတစ်ခုသို့ ဒြပ်စင်တစ်ခုအား ကပ်ထားရန် (လော့ခ်ချထားခြင်း) ဖြစ်လာစေရန် ခွင့်ပြုသည်။ စာမျက်နှာကို အပေါ်နှင့်အောက် ရွှေ့နေစဉ် တိကျသောဧရိယာတွင် ၎င်းတို့ကို "ကပ်" စေရန် လမ်းကြောင်းပြမီနူးများ သို့မဟုတ် လူမှုရေးအိုင်ကွန်ခလုတ်များနှင့် အသုံးပြုလေ့ရှိသည်။
ပလပ်အင်သည် ဤအပြုအမူကို အဖွင့်အပိတ် ပြုလုပ်ပေးသည် (Scroll အနေအထားပေါ်မူတည်၍ CSS ရာထူးတန်ဖိုးကို ပုံသေမှ ပုံသေသို့ပြောင်းသည်)။
affix plugin သည် class သုံးခုကြားတွင် ပြောင်းသွားသည်- .affix, .affix-top, နှင့်
.affix-bottom. လူတန်းစားတစ်ခုစီသည် သီးခြားပြည်နယ်တစ်ခုကို ကိုယ်စားပြုသည်။ position:fixed
အတန်းမှလွဲ၍ အမှန်တကယ်ရာထူး များကို ကိုင်တွယ်ရန် သင်သည် CSS ဂုဏ်သတ္တိများကို ထည့်သွင်းရပါမည် .affix။
ပိုမိုသိရှိလိုပါက၊ ကျွန်ုပ်တို့၏ Bootstrap Affix Tutorial ကို ဖတ်ရှုပါ ။
အကြံပြုချက်- Affix plugin ကို Scrollspy ပလပ်အင် နှင့် မကြာခဏ တွဲသုံး ပါသည်။
data-* Attributes မှတဆင့်
data-spy="affix"သင်စူးစမ်းလိုသောဒြပ်စင်သို့ ပေါင်းထည့်
ကာ လိပ်၏တည်နေရာကို တွက်ချက်ရန် ရည်ညွှန်းချက်။data-offset-top|bottom="number"
ဥပမာ
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
ဥပမာ
$('.nav').affix({offset: {top: 150} });
Affix ရွေးချယ်မှုများ
ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-offset="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Affix Events များ
အောက်ဖော်ပြပါဇယားတွင် ရရှိနိုင်သော ဆက်စပ်ဖြစ်ရပ်များအားလုံးကို စာရင်းပြုစုထားသည်။
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
နောက်ထပ် ဥပမာများ
navbar တွဲထည့်ထားသည်။
အလျားလိုက်ကပ်ထားသော လမ်းကြောင်းပြမီနူးကို ဖန်တီးပါ-
ဥပမာ
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
navbar ကိုအလိုအလျောက်ထည့်သွင်းရန် jQuery ကိုအသုံးပြုခြင်း။
အသုံးပြုသူ သည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခုကို ကျော်သွားပြီးနောက် navbar ကို ကပ်ရန် jQuery ၏ outerHeight() နည်းလမ်းကို အသုံးပြုပါ-
ဥပမာ
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
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>
affix ပေါ်တွင် လှုပ်ရှားနေသော navbar
မတူညီသော .affix အတန်းများကို စီမံခန့်ခွဲရန် CSS ကိုသုံးပါ-
ဥပမာ - အောက်ခံအရောင်နှင့် navbar ၏အကွက်များကို ရွှေ့ပါ။
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
ဥပမာ - navbar တွင် ပွတ်ဆွဲပါ။
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}