বুটস্ট্রাপ৩ অ্যাফিক্স (Bootstrap3 Affix)

বুটস্ট্রাপ এফিক্স প্লাগ-ইন

বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।

স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে 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 ব্যবহার করবে।

উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন <nav> এলিমেন্টে .affix ক্লাস (position:fixed) যুক্ত করে নেয়। আপনি যদি উদাহরণটি ওপেন করেন, এর পাশাপাশি আপনি আরো দেখতে পাবেন যে, আমরা .affix ক্লাসের মধ্যে সিএসএস top প্রোপার্টি ব্যবহার করেছি যার ভ্যালু হলো ০(শুন্য) । এর মাধ্যমে এটা নিশ্চিত করা হয় যে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করবো তখনই ন্যাভিগেশন বারটি পেজের উপরে অবস্থান নিশ্চিত করবে।

স্ক্রলস্পাই এবং এফিক্স

স্ক্রলস্পাই প্লাগ-ইনের সাথে এফিক্স প্লাগ-ইনের ব্যবহার:

Horizontal মেনু (ন্যাভবার)

kt_satt_skill_example_id=1200

Vertical মেনু (সাইডবার)

kt_satt_skill_example_id=1202