পজিশন: স্টিকি,আমার হঠাত করে খুঁজে পাওয়া মজার একটা সি এস এস ফিচার

আনকমন বা ব্রাউজারে কম সাপোর্ট করে এমন ফিচারের নাম ভুলে যাই। এর আগের ব্লগ পোস্টে স্ক্রল স্ন্যাপ নিয়ে লেখার সময় এই ফিচারের রেফারেন্স খুজতে গিয়ে ভুল কীওয়ার্ড দেয়াতে নতুন একটা সি এস এস ফিচার খুজে পেয়ে গিয়েছিলাম। আজকে সেটা নিয়েই লিখবো।

একটা স্যাম্পল দিয়ে শুরু করি:

স্যাম্পলটাতে স্ক্রল করলে খেয়াল করবেন, প্রথমে স্টিকি লেখা এলিমেন্ট নরমালি স্ক্রল হয়, তারপর হঠাত করে যেই একটা নির্দিষ্ট যায়গায় পৌছে যায়, তখন আর স্ক্রল করেনা position:fixed এলিমেন্টের মত চুপচাপ ঐখানেই বসে থাকে।

যেকোন এলিমেন্টকে পজিশন স্টিকিতে পরিনত করতে দুইটা প্রোপার্টি দরকার, একটা position:sticky আর একটা কোন পজিশনে গেলে স্টিকি হয়ে যাবে সেটা। এইটা পুরান পজিশনিং সি এস এস দিয়েই ( top, right, bottom left এইগুলো ) করা যায়। আমার স্যাম্পলে আমি চাচ্ছিলাম এলিমেন্ট top:10px এ আটকে যাক। তাই আমার সি এস এস ছিলো:

.sticky{
    position:sticky;
    top:10px;
}

এর মানে আমি যখন স্ক্রল করতে করতে আমার ভিউপোর্টের উপরের আংশের সাথে আমার এলিমে ন্টের টপ পজিশনের দুরত্ব ১০ পিক্সেল অথবা এর কম থাকবে, এলিমেন্ট position:fixed এর মত হয়ে যাবে।

স্ক্রল করতে গিয়েই খেয়াল করবেন যখন আমার স্টিকি এলিমেন্ট(লাল রংয়ের) উপরের ধারের একেবারে কাছে চলে আসে (১০ পিক্সেল বা তার কম) তখনই আটকে যায়। এইরকম চাইলে যত ইচ্ছা তত এলিমেন্টে স্টিকি পজিশনিং ব্যবহার করা যায়।

ফিচারটির রেফারেন্স ডকুমেন্ট পাবেন এই লিংকে

ব্রাউজার সাপোর্ট:

ব্রাউজার সাপোর্ট মাশাআল্লাহ ভালো। অপেরা মিনি আর কিছু অচেনা চাইনিজ ব্রাউজার বাদ দিলে সব ব্রাউজারে মোটামুটি কম বেশী সাপোর্ট করে এই ফিচার।

পুরো ব্রাউজার কম্প্যাটিবিলিটি টেবিল পাবেন এই লিংক‌ে

সি এস এস দিয়ে এখন অনেক কিছুই করা যায় যেগুলো করতে আগে আলাদা জাভাস্ক্রিপ্ট লাইব্রেরী দরকার হতো। ব্যাপারটা বেশ মজার।