position: sticky हा एक संकर आहे: एक घटक relative प्रमाणे वर्तन करतो (सामान्य प्रवाहात राहतो) जोपर्यंत ते आपण निर्दिष्ट केलेल्या उंबरठ्यापर्यंत स्क्रोल करत नाहीत, तर fixed प्रमाणे वर्तन करतात (जागेला चिकटून राहतात) — परंतु केवळ जर त्याचा समाविष्ट खंड अजूनही स्क्रीनवर आहे.
{
: sticky;
: ;
}
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 जाळे जाणे हेच तुम्हाला त्याचा विश्वासार्हतेने वापर करू देते.