position: sticky एक संकर हो: एक element relative जस्तै व्यवहार गर्छ (सामान्य flow मा रहन्छ) जबसम्म यो तपाईंले निर्दिष्ट गरेको threshold मा स्क्रोल हुँदैन, त्यसपछि fixed जस्तै व्यवहार गर्छ (स्थानमा टाँसिन्छ) — तर केवल यसको containing block अभी पनि screen मा छ भने।
{
: sticky;
: ;
}
top (वा bottom/left/right) मान आवश्यक छ — यसले threshold परिभाषित गर्छ। यो बिना, sticky कुनै काम गर्दैन।
एक sticky element आफ्नो अभिभावक कन्टेनर मा सीमाबद्ध छ। यो त्यो अभिभावक को माध्यम बाट स्क्रोल गर्दा टाँसिन्छ, त्यसपछि अभिभावक को तल पास भएपछी स्क्रोल हराउँछ। यो हो जसले "sticky section headers" काम गर्छ — प्रत्येक header केवल यसको आफ्नो section दृश्य मा छ भने टाँसिन्छ।
१. एक पूर्वज को overflow: hidden/auto/scroll छ। यो #१ कारण हो। Sticky positioning कुनै पनि scrollable पूर्वज द्वारा तोडिन्छ, किनभने element त्यो scroll container को सापेक्ष टाँसिन्छ, पृष्ठ को नहीं:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
२. अभिभावक पर्याप्त लामो छैन। Sticky केवल टाँस्न को लागि जागा छ यदि अभिभावक sticky element भन्दा लामो छ — यदि अभिभावक समान उचाई हो, स्क्रोल गर्न को लागी कुनै काम नै छैन, तो यो कहिलेकाहीँ टाँसिएको देखा पर्दैन।
३. कुनै threshold सेट गरिएको छैन। top/bottom बिर्सनु भनेको कुनै stick point छैन।
४. अभिभावक मा उचाई सीमाहरू (उदाहरणको लागि 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 कुनै पनि पूर्वज मा silently यो तोड्छ — यो "किन यो टाँसिदैन?" डिबगिङ को एक बारम्बार स्रोत हो।
Containing-block scope र overflow trap जान्नु हो जसले तपाईंलाई यो विश्वसनीय रूपमा प्रयोग गर्न दिन्छ।