position: sticky একটি হাইব্রিড: একটি উপাদান relative এর মতো কাজ করে (সাধারণ প্রবাহে থাকে) যতক্ষণ না এটি আপনি নির্দিষ্ট করেন এমন একটি থ্রেশহোল্ডে স্ক্রোল করা হয়, তারপর fixed এর মতো কাজ করে (জায়গায় লেগে থাকে) — কিন্তু শুধুমাত্র যখন এর ধারণকারী ব্লক এখনও স্ক্রিনে রয়েছে।
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
top (বা bottom/left/right) মান প্রয়োজনীয় — এটি থ্রেশহোল্ড সংজ্ঞায়িত করে। ছাড়া, sticky কিছুই করে না।
একটি sticky উপাদান তার মূল ধারক সীমাবদ্ধ। এটি সেই মূলকের মাধ্যমে স্ক্রল করার সময় আটকায়, তারপর একবার মূলের নীচ পাস করলে দূরে স্ক্রোল হয়। এটি "sticky বিভাগ শিরোনাম" কাজ করা যা করে — প্রতিটি শিরোনাম শুধুমাত্র তার নিজস্ব বিভাগ দৃশ্যে থাকা পর্যন্ত আটকায়।
1. একটি পূর্বপুরুষ overflow: hidden/auto/scroll আছে। এটি #1 কারণ। sticky অবস্থান যেকোনো স্ক্রোলযোগ্য পূর্বপুরুষ দ্বারা বিদ্ধ হয়, কারণ উপাদানটি সেই স্ক্রোল ধারকের সাপেক্ষে লেগে থাকে, পৃষ্ঠা নয়:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. মূল যথেষ্ট লম্বা নয়। sticky শুধুমাত্র কাজ করে যদি মূল sticky উপাদানের চেয়ে লম্বা হয় — যদি মূল একই উচ্চতা হয়, তার মাধ্যমে স্ক্রোল করার জন্য কিছু নেই, তাই এটি কখনও আটকে থাকার মতো মনে হয় না।
3. কোন থ্রেশহোল্ড সেট করা নেই। top/bottom ভুলে যাওয়া মানে কোন স্টিক পয়েন্ট নেই।
4. মূলের উপর উচ্চতা সীমাবদ্ধতা (যেমন flex মূল উপাদান প্রসারিত করা) স্ক্রোল রুম মুছে ফেলতে পারে।
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky sticky শিরোনাম, টেবিল শিরোনাম, সাইডবার এবং কোন JavaScript ছাড়াই "scrollspy" UI এর শক্তি।
কিন্তু এর বিশেষত্ব — বিশেষ করে যে কোনো পূর্বপুরুষে overflow এটি নীরবে ভেঙে দেয় — এটিকে "কেন এটি আটকাবে না?" ডিবাগিংয়ের একটি ঘন ঘন উৎস করে তোলে।
ধারণকারী-ব্লক স্কোপ এবং overflow ফাঁদ জানা হল যা আপনাকে এটি নির্ভরযোগ্যভাবে ব্যবহার করতে দেয়।