position: sticky ایک ہائبرڈ ہے: ایک عنصر relative کی طرح کام کرتا ہے (عام بہاؤ میں رہتا ہے) جب تک یہ آپ کی طے شدہ حد تک سکرول نہ ہو جائے، پھر fixed کی طرح کام کرتا ہے (جگہ میں چپکا رہتا ہے) — لیکن صرف جب تک اس کا containing block ابھی بھی اسکرین پر ہو۔
{
: sticky;
: ;
}
top (یا bottom/left/right) کی قیمت ضروری ہے — یہ حد کو متعین کرتی ہے۔ اس کے بغیر، sticky کوئی کام نہیں کرتا۔
ایک sticky عنصر اپنے والدین کنٹینر تک محدود ہے۔ یہ اس والد کے ذریعے سکرول کرتے وقت چپکتا ہے، پھر ایک بار والد کا نچلا حصہ گزرنے کے بعد سکرول ہو جاتا ہے۔ یہ وہ ہے جو "sticky سیکشن ہیڈرز" کو کام کرتا ہے — ہر سرخی صرف اپنے سیکشن کے نظر آتے وقت چپکتی ہے۔
1. ایک سلف کے پاس overflow: hidden/auto/scroll ہے۔ یہ #1 وجہ ہے۔ Sticky positioning کسی بھی scrollable سلف سے ٹوٹ جاتی ہے، کیونکہ عنصر اس scroll container کے نسبت چپکتا ہے، صفحہ کے نسبت نہیں:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. والد کافی بڑا نہیں ہے۔ Sticky صرف اس صورت میں چپکنے کی جگہ رکھتا ہے اگر والد sticky عنصر سے بڑا ہو — اگر والد یکساں اونچائی ہے، تو اس کے ذریعے سکرول کرنے کے لیے کچھ نہیں ہے، تو یہ کبھی چپکا ہوا نظر نہیں آتا۔
3. کوئی حد متعین نہیں۔ top/bottom بھول جانا مطلب کوئی stick نقطہ نہیں۔
4. والد پر اونچائی کی پابندیاں (مثال کے طور پر ایک flex والد اشیاء کو پھیلاتا ہے) بھی scroll کی جگہ کو ہٹا سکتی ہے۔
✓ 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 سرخیوں، ٹیبل سرخیوں، سائڈ بارز، اور "scrollspy" یوز انٹرفیسز کو کوئی JavaScript کے بغیر طاقت دیتا ہے۔
لیکن اس کی خصوصیات — خاص طور پر یہ کہ کسی بھی سلف پر overflow خاموشی سے اسے توڑ دیتا ہے — اسے "یہ کیوں چپکا نہیں ہوگا؟" ڈیبگنگ کی بار بار وجہ بناتے ہیں۔
Containing-block کے دائرے کو جاننا اور overflow کے پھندے کو جاننا وہ ہے جو آپ کو اسے قابل اعتماد طریقے سے استعمال کرنے دیتا ہے۔