- Sticky Element လုပ်နည်း
CSS ဖြင့် ကပ်စေးသောဒြပ်စင်တစ်ခုကို ဖန်တီးနည်းကို လေ့လာပါ။
မှတ်ချက်- ဤဥပမာသည် Internet Explorer သို့မဟုတ် Edge 15 နှင့် အစောပိုင်းဗားရှင်းများတွင် အလုပ်မလုပ်ပါ။
စေးကပ်သောဒြပ်စင်
ဥပမာ
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
position: sticky;
အသုံးပြုသူ၏ scroll အနေအထားပေါ်အခြေခံ၍ ပါ၀င် သည့်အရာတစ်ခုအား နေရာချထားပါသည်။
စေးကပ်သောဒြပ်စင်သည် ရွေ့လျားမှု အနေအထားပေါ် မူတည်၍ relative
နှင့် , ကြားတွင် ပြောင်းသည်။ fixed
viewport တွင် ပေးထားသော offset အနေအထားကို မတွေ့မချင်း ၎င်းအား ဆွေမျိုးအနေအထားတွင် နေရာချထားသည် - ထို့နောက် ၎င်းသည် နေရာတွင် "ကပ်" (အနေအထား- ပုံသေကဲ့သို့)။
မှတ်ချက်- Internet Explorer၊ Edge 15 နှင့် အစောပိုင်းဗားရှင်းများသည် စေးကပ်နေသောနေရာချထားခြင်းကို မပံ့ပိုးပါ။ Safari တွင် -webkit- ရှေ့ဆိက်တစ်ခု လိုအပ်သည် (အောက်ပါ ဥပမာကိုကြည့်ပါ)။ အလုပ်လုပ်ရန် ကပ်စေးနဲသော နေရာချထားခြင်းအတွက် top
, right
, bottom
သို့မဟုတ် အနည်းဆုံးတစ်ခုကိုလည်း သတ်မှတ်ရပါမည် ။left
CSS Positoning အကြောင်းပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Position သင်ခန်းစာကို ဖတ်ရှုပါ။