বুটস্ট্রাপ JS স্ক্রলস্পাই (scrollspy.js)
স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টের লিঙ্ককে স্বয়ংক্রিয়ভাবে আপডেট করার জন্য বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন ব্যবহার করা হয়।
বুটস্ট্রাপ স্ক্রলস্পাই সম্পর্কে জানতে বুটস্ট্রাপ স্ক্রলস্পাই টিউটোরিয়ালটি পড়ুন।
টিপসঃ স্ক্রলস্পাই প্লাগ-ইন প্রায়ই এফিক্স প্লাগ-ইনের সাথে ব্যবহার করা হয়।
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
যেই এলিমেন্টে স্ক্রলস্পাই ব্যবহার করবেন ঐ এলিমেন্টের মধ্যে data-spy="scroll" এট্রিবিউটটি যুক্ত করুন (বেশিরভাগ ক্ষেত্রে < body > এলিমেন্টেই ইহা ব্যবহার করা হয়)।
তারপর data-target এট্রিবিউটের সাথে id এর ভ্যালু অথবা ন্যাভিগেশন বারের (.navbar) ক্লাসের নাম যোগ করি। ইহা ন্যাভবারের সাথে স্ক্রল এরিয়ার কানেকশন তৈরি করে।
ন্যাভবারের লিস্ট আইটেমের ID এবং স্ক্রল এরিয়ার ID একই হতে হবে (< div id="section1" > ও <a href="#section1"> এর ID একই)।
যখন স্ক্রল করা হয়, অপশনাল data-offset এট্রিবিউটটি স্ক্রলের সময় উপরের থেকে কত পিক্সেল নিচে নামবে তা নির্দেশ করে। যখন আপনার মনে হবে ন্যাভবারের একটিভ স্ট্যাট স্ক্রল এলিমেন্টের সাপেক্ষে খুব দ্রুত অথবা খুব ধীরগতিতে পরিবর্তন হচ্ছে তখন এই অপশন খুব গুরুত্বপূর্ন ভূমিকা পালন করবে। ডিফল্ট ভ্যালু ১০ পিক্সেল।
kt_satt_skill_example_id=1324
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
জাভাস্ক্রিপ্টের সাহায্যে সক্রিয় করার জন্যঃ
kt_satt_skill_example_id=1325
বুটস্ট্রাপ স্ক্রলস্পাই এর অপশন
অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। ডাটা এট্রিবিউটের ক্ষেত্রে data-* নামের সাথে অপশনের নাম যুক্ত করা হয়, যেমন data-offset=""
| নাম | টাইপ | ডিফল্ট | বর্ণনা |
|---|---|---|---|
offset | number | 10 | ন্যাভবারের সাথে লিংককৃত সেকশন বা এলিমেন্টের কতো পিক্সেলের মধ্যে স্ক্রলস্পাই একটিভ হবে তা নির্দেশ করে। এটি অপশনাল। ডিফল্ট ভ্যালু হচ্ছে ১০ পিক্সেল। আগের উদাহরণটিতে data-offset এট্রিবিউটটি ব্যবহার করা হয়েছে। |
আরো উদাহরণ
বুটস্ট্রাপ এ্যানিমেশনযুক্ত স্ক্রলস্পাই
একই পেজের মধ্যে স্মুথ(smooth) পেজ স্ক্রল যেভাবে যোগ করবেনঃ
kt_satt_skill_example_id=1326
Read more
