position: sticky ఒక హైబ్రిడ్: ఒక మూలకం relative లాగా ప్రవర్తిస్తుంది (సాధారణ ప్రవాహంలో ఉంటుంది) నీవు నిర్దిష్టం చేసిన థ్రెషోల్డ్కు స్క్రోల్ చేసే వరకు, ఆ తర్వాత fixed లాగా ప్రవర్తిస్తుంది (స్థానంలో దిక్కుస్తుంది) — కానీ దాని ఆంతరిక బ్లాక్ ఇప్పటికీ స్క్రీన్పై ఉన్నప్పుడు మాత్రమే.
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
top (లేదా bottom/left/right) విలువ అవసరం — ఇది థ్రెషోల్డ్ను నిర్వచిస్తుంది. దానిని లేకుండా, sticky ఏమీ చేయదు.
ఒక sticky మూలకం దాని పేరెంట్ కంటైనర్కు పరిమితం చేయబడింది. ఇది ఆ పేరెంట్ను దీని ద్వారా స్క్రోల్ చేసేటప్పుడు స్టిక్ చేస్తుంది, ఆ తర్వాత పేరెంట్ యొక్క దిగువ భాగం గుండా వెళ్లిన తర్వాత స్క్రోల్ చేస్తుంది. ఇది "sticky సెక్షన్ హెడర్లు" ఎలా పని చేస్తుందో చేస్తుంది — ప్రతి హెడర్ దాని స్వంత సెక్షన్ దృశ్యంలో ఉన్నప్పుడు మాత్రమే స్టిక్ చేస్తుంది.
1. ఒక పూర్వీకుడికి overflow: hidden/auto/scroll ఉంది. ఇది #1 కారణం. Sticky positioning ఏదైనా స్క్రోల్ చేయగల పూర్వీకుడి ద్వారా విచ్ఛిన్నమవుతుంది, ఎందుకంటే మూలకం ఆ స్క్రోల్ కంటైనర్కు సంబంధించి స్టిక్ చేస్తుంది, పేజీకి కాదు:
.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 హెడర్లు, టేబల్ హెడర్లు, సైడ్బార్లు, మరియు "scrollspy" UI లను JavaScript లేకుండా శక్తివంతం చేస్తుంది.
కానీ దాని విచిత్రతలు — ముఖ్యంగా ఏదైనా పూర్వీకుడిపై overflow దానిని నిశ్చలంగా విచ్ఛిన్నం చేస్తుంది — ఇది "ఈ స్టిక్ కెందుకు రాదు?" డీబగ్గింగ్లో తరచుగా మూలం.
ఆంతరిక-బ్లాక్ స్కోప్ మరియు overflow ట్రాప్ను తెలుసుకోవడమే దానిని నమ్మకంగా ఉపయోగించనివ్వుతుంది.