position: sticky एक हाइब्रिड है: एक एलिमेंट relative की तरह व्यवहार करता है (सामान्य flow में बना रहता है) जब तक यह आपके द्वारा निर्दिष्ट किसी थ्रेशोल्ड तक स्क्रॉल नहीं हो जाता, फिर fixed की तरह व्यवहार करता है (अपनी जगह पर चिपक जाता है) — लेकिन केवल तब तक जब तक उसका containing block अभी भी स्क्रीन पर है।
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
top (या bottom/left/right) वैल्यू आवश्यक है — यह थ्रेशोल्ड को परिभाषित करती है। इसके बिना, sticky कुछ नहीं करती।
एक sticky एलिमेंट अपने पैरेंट कंटेनर तक सीमित होता है। यह उस पैरेंट के बीच से स्क्रॉल करते समय चिपका रहता है, फिर पैरेंट का निचला किनारा गुज़र जाने पर स्क्रॉल होकर हट जाता है। यही "sticky section headers" को काम करने योग्य बनाता है — प्रत्येक header केवल तभी चिपकता है जब उसका अपना सेक्शन दृश्य में हो।
1. किसी ancestor में overflow: hidden/auto/scroll है। यह #1 कारण है। sticky positioning किसी भी scrollable ancestor द्वारा टूट जाती है, क्योंकि एलिमेंट उस स्क्रॉल कंटेनर के सापेक्ष चिपकता है, न कि पेज के:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. पैरेंट पर्याप्त ऊँचा नहीं है। sticky को चिपकने के लिए जगह केवल तभी मिलती है जब पैरेंट sticky एलिमेंट से ऊँचा हो — अगर पैरेंट उतनी ही ऊँचाई का है, तो स्क्रॉल करने को कुछ नहीं है, इसलिए यह कभी चिपकता हुआ नहीं दिखता।
3. कोई थ्रेशोल्ड सेट नहीं किया गया। top/bottom भूल जाने का मतलब है कोई stick point नहीं।
4. पैरेंट पर height constraints (जैसे एक flex parent जो items को stretch करता है) भी स्क्रॉल की जगह को हटा सकते हैं।
✓ 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 बिना किसी JavaScript के sticky headers, table headers, sidebars, और "scrollspy" UIs को संचालित करती है।
लेकिन इसकी विचित्रताएँ — खासकर यह कि किसी भी ancestor पर overflow इसे चुपचाप तोड़ देता है — इसे "यह चिपक क्यों नहीं रहा?" डीबगिंग का एक बार-बार आने वाला स्रोत बना देती हैं।
containing-block का दायरा और overflow का जाल जानना ही वह चीज़ है जो आपको इसे भरोसेमंद रूप से इस्तेमाल करने देती है।