position: sticky ایک ہائبرڈ ہے: ایک عنصر relative کی طرح برتاؤ کرتا ہے (عام بہاؤ میں رہتا ہے) جب تک یہ آپ کی طے شدہ حد تک اسکرول نہ ہو، پھر fixed کی طرح برتاؤ کرتا ہے (جگہ میں رہتا ہے) — لیکن صرف اس وقت جب تک اس کا containing block اب بھی اسکرین پر ہو۔
{
: sticky;
: ;
}
top (یا bottom/left/right) قیمت ضروری ہے — یہ حد کو متعین کرتا ہے۔ اس کے بغیر، sticky کچھ نہیں کرتا۔
ایک sticky عنصر اپنے والد کنٹینر تک محدود ہے۔ یہ اس والد کے ذریعے اسکرول کرتے وقت رہتا ہے، پھر ایک بار جب والد کا نچلا حصہ گزر جاتا ہے تو اسکرول ہو جاتا ہے۔ یہی وہ چیز ہے جو "sticky section headers" کو کام کرتا ہے — ہر ہیڈر صرف اپنے سیکشن کے دیکھنے میں رہتے ہوئے رہتا ہے۔
1. کسی سلف کے پاس overflow: hidden/auto/scroll ہے۔ یہ #1 وجہ ہے۔ Sticky پوزیشننگ کسی بھی scrollable سلف سے ٹوٹ جاتی ہے، کیونکہ عنصر صفحہ کی بجائے اس اسکرول کنٹینر سے رہتا ہے:
.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 headers، table headers، sidebars، اور "scrollspy" UIs کو کوئی JavaScript کے بغیر چلاتا ہے۔
لیکن اس کی عجیب باتیں — خاص طور پر یہ کہ کسی بھی سلف پر overflow اسے خاموشی سے توڑ دیتا ہے — یہ "یہ چپکنے کے لیے کیوں نہیں رکے گا؟" ڈیبگنگ کا ایک بار بار ہونے والا ذریعہ ہے۔
containing-block کے دائرے اور overflow trap کو جاننا یہ ہے کہ آپ اسے قابل اعتماد طریقے سے استعمال کر سکتے ہیں۔