বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।
স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে on এবং off এ টোগল (সিএসএস position
প্রোপার্টিকে static
থেকে fixed
) করে।
এফিক্সের মাধ্যমে যখন আমরা পেজ উপর-নিচ স্ক্রলিং করি, মেনুটি সবসময় দৃশ্যমান থাকে এবং এর অবস্থানে গিয়ে থেমে যায়।
কিভাবে একটি horizontal এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1198
কিভাবে একটি vertical এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1199
যেই এলিমেন্টে আপনি এফিক্স করতে চান সেটিতে data-spy="affix"
এট্রিবিউট যুক্ত করুন।
স্ক্রলের অবস্থান হিসেব করার জন্য data-offset-top|bottom
এট্রিবিউট ব্যবহার করুন (অপশনাল) ।
এফিক্স প্লাগ-ইন তিনটি ক্লাসের মধ্যে টোগল তৈরি করে: .affix
, .affix-top
, এবং .affix-bottom
। প্রত্যেকটি ক্লাসই নির্দিষ্ট স্টেটকে রিপ্রেজেন্ট করে। আসল অবস্থান মোকাবেলা করার জন্য আপনাকে অবশ্যই সিএসএস প্রোপার্টি ব্যবহার করতে হবে। শুধুমাত্র ব্যতিক্রম এক্ষেত্রেই, .affix
ক্লাসে শুধুমাত্র position:fixed
ব্যবহার করতে হবে।
.affix-top
অথবা .affix-bottom
ক্লাস যুক্ত করে নেয়। এক্ষেত্রে সিএসএসের মাধ্যমে অবস্থান নির্ধারন করার প্রয়োজন নেই।.affix
ক্লাসের (sets position:fixed
) মাধ্যমে .affix-top
অথবা .affix-bottom
ক্লাসকে রিপ্লেস করে। পেজের কোন স্থানে এফিক্স এলিমেন্টটির স্থান হবে এটা অবশ্যই আপনাকে সিএসএসের top
অথবা bottom
প্রোপার্টির মাধ্যমে নির্ধারণ করে দিতে হবে।.affix-bottom
ক্লাসের মাধ্যমে .affix
ক্লাস রিপ্লেস হবে। যেহেতু অফসেট হলো অপশনাল, প্রথম সেটিং এ যথাযথ সিএসএস ব্যবহার করতে হবে। এই ক্ষেত্রে, যখন প্রয়োজন হবে তখন position:absolute
ব্যবহার করবে।উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন
স্ক্রলস্পাই প্লাগ-ইনের সাথে এফিক্স প্লাগ-ইনের ব্যবহার:
kt_satt_skill_example_id=1200
kt_satt_skill_example_id=1202
আরও দেখুন...