Bootstrap Affix Plugin (အဆင့်မြင့်)

Affix Plugin

Affix ပလပ်အင်သည် စာမျက်နှာပေါ်ရှိ ဧရိယာတစ်ခုသို့ ဒြပ်စင်တစ်ခုအား ကပ်ထားရန် (လော့ခ်ချထားခြင်း) ဖြစ်လာစေရန် ခွင့်ပြုသည်။ စာမျက်နှာကို အပေါ်နှင့်အောက် ရွှေ့နေစဉ် တိကျသောဧရိယာတွင် ၎င်းတို့ကို "ကပ်" စေရန် လမ်းကြောင်းပြမီနူးများ သို့မဟုတ် လူမှုရေးအိုင်ကွန်ခလုတ်များနှင့် အသုံးပြုလေ့ရှိသည်။

ပလပ်အင် သည် ဤအမူအကျင့်ကို အဖွင့်အပိတ် ပြောင်းပေးသည် (ရွေ့လျားမှု အနေအထားပေါ် မူတည်၍ တန်ဖိုး CSS positionမှ ) staticကို ပြောင်းလဲသည်။fixed

ဥပမာ 1) ကပ်ထားသော navbar တစ်ခု-

ဥပမာ 2) ကပ်ထားသော ဘေးဘားတစ်ခု-

Affix ဖြင့်၊ ကျွန်ုပ်တို့သည် စာမျက်နှာအပေါ်နှင့် အောက်ကို လှိမ့်လိုက်သောအခါ၊ မီနူးကို အမြဲမြင်ရပြီး ၎င်း၏ အနေအထားတွင် လော့ခ်ချထားသည်။

Affixed Navigation Menu ဖန်တီးနည်း

အောက်ဖော်ပြပါ ဥပမာတွင် အလျားလိုက်ကပ်ထားသော လမ်းကြောင်းပြမီနူးကို ဖန်တီးနည်းကို ပြသသည်-

အောက်ဖော်ပြပါ ဥပမာသည် ဒေါင်လိုက်ထည့်သွင်းထားသော လမ်းကြောင်းပြမီနူးကို ဖန်တီးနည်းကို ပြသသည်-

နမူနာရှင်းပြထားပါတယ်။

သင် ထည့်သွင်း data-spy="affix"လိုသောဒြပ်စင်သို့ထည့်ပါ။

စိတ်ကြိုက်ရွေးချယ်နိုင်သည်၊ data-offset-top|bottomလိပ်၏တည်နေရာကိုတွက်ချက်ရန် attribute ကိုထည့်ပါ။

ဘယ်လိုအလုပ်လုပ်လဲ

affix plugin သည် class သုံးခုကြားတွင် ပြောင်းသွားသည်- .affix, .affix-top, နှင့် .affix-bottom. လူတန်းစားတစ်ခုစီသည် သီးခြားပြည်နယ်တစ်ခုကို ကိုယ်စားပြုသည်။ position:fixed အတန်းမှလွဲ၍ အမှန်တကယ်ရာထူး များကို ကိုင်တွယ်ရန် သင်သည် CSS ဂုဏ်သတ္တိများကို ထည့်သွင်းရပါမည် .affix။

• ပလပ်အင် သည် ဒြပ်စင်သည် ၎င်း၏ထိပ်ဆုံး သို့မဟုတ် အောက်ဆုံးအနေအထားတွင်ရှိကြောင်းညွှန်ပြရန် ပလပ်အင် .affix-topသို့မဟုတ် အတန်းအစားကို ပေါင်းထည့် သည်။ .affix-bottomဤအချိန်တွင် CSS ဖြင့် နေရာချထားရန် မလိုအပ်ပါ။


• ကပ်ထားသောဒြပ်စင်ကို ကျော်သွားခြင်းသည် အမှန်တကယ် ကပ်တွယ်ခြင်းကို အစပျိုးစေသည် - ဤနေရာတွင် ပလပ်အင်သည် အတန်းအစား ( .affix-topသို့ ) အတန်းအစား (အစုံ ) .affix-bottomဖြင့် အစားထိုးပါသည်။ ဤအချိန်တွင်၊ သင်သည် စာမျက်နှာရှိ ကပ်ပါဒြပ်စင်ကို နေရာချထားရန် CSS သို့မဟုတ် ပိုင်ဆိုင်မှုကို ထည့်ရပါမည်။.affixposition:fixedtopbottom


• အောက်ခြေအော့ဖ်ဆက်ကို သတ်မှတ်ပါက၊ ကျော်သွားပါက ၎င်းသည် .affixအတန်းအစား .affix-bottom. အော့ဖ်ဆက်များသည် ရွေးချယ်နိုင်သောကြောင့်၊ သတ်မှတ်ခြင်းတစ်ခုသည် သင့်အား သင့်လျော်သော CSS ကို သတ်မှတ်ရန် လိုအပ်သည်။ ဤကိစ္စတွင် position:absoluteလိုအပ်သည့်အခါထည့်ပါ။

အထက်ဖော်ပြပါပထမဥပမာတွင်၊ Affix plugin သည် ကျွန်ုပ်တို့ .affixအပေါ်မှ 197 pixels ကို အပေါ်မှလှိမ့်လိုက်သောအခါတွင် class (position:fixed) ကို <nav> element သို့ ပေါင်းထည့်ပါသည်။ ဥပမာကိုဖွင့်ပါက၊ ကျွန်ုပ်တို့သည် အတန်း topထဲသို့ 0 တန်ဖိုးဖြင့် CSS ပိုင်ဆိုင်မှုကို ထည့်ထားကြောင်းလည်း တွေ့ရပါမည်။ .affixကျွန်ုပ်တို့သည် အပေါ်မှ 197 pixels ကို လှိမ့်လိုက်သောအခါ navbar သည် စာမျက်နှာ၏ထိပ်တွင် အမြဲရှိနေကြောင်း သေချာစေရန်ဖြစ်သည်။

Scrollspy & Affix

Scrollspy ပလပ်အင် နှင့်အတူ Affix ပလပ်အင်ကို အသုံးပြုခြင်း-

Bootstrap Affix ကိုးကားချက်ကို အပြီးသတ်ပါ။

affix နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံး၏ အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Affix Reference သို့ သွားပါ ။