position: sticky એ એક હાઇબ્રિડ છે: એક element relative જેવું વર્તે છે (સામાન્ય flow માં રહે છે) જ્યાં સુધી તે તમારા દ્વારા સ્પષ્ટ કરેલ થ્રેશોલ્ડ સુધી scroll ન થાય, પછી fixed જેવું વર્તે છે (સ્થાને લાકડી કરે છે) — પરંતુ માત્ર જ્યારે તેનું containing block હજુ પણ સ્ક્રીન પર હોય.
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
top (અથવા bottom/left/right) મૂલ્ય આવશ્યક છે — તે થ્રેશોલ્ડને વ્યાખ્યાયિત કરે છે. તે વિના, sticky કશું જ કરતું નથી.
এक sticky element તેના parent container માં મર્યાદિત છે. તે તે parent દ્વારા scrolling કરતી વખતે લાકડી કરે છે, પછી એકવાર parent નું નીચું પસાર થઈ જાય ત્યારે તે scroll કરી જાય છે. આ જ છે કે જે "sticky section headers" કાર્ય કરે છે — દરેક header માત્ર તેનો પોતાનો વિભાગ view માં હોય તો જ લાકડી કરે છે.
1. એક ancestor માં overflow: hidden/auto/scroll છે. આ #1 કારણ છે. Sticky positioning કોઈપણ scrollable ancestor દ્વારા તોડી દેવામાં આવે છે, કારણ કે element તે scroll container ની તુલનામાં લાકડી કરે છે, પૃષ્ઠ નહીં:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Parent પર્યાપ્ત ઊંચું નથી. Sticky માત્ર stick કરવાની જગ્યા ધરાવે છે જો parent sticky element કરતાં ઊંચું હોય — જો parent સમાન ઊંચાઈ હોય તો, scroll કરવા માટે કશું જ નથી, તેથી તે stick થતું દેખાય નહીં.
3. થ્રેશોલ્ડ નির્ધારિત નથી. top/bottom ભૂલે છે એટલે કોઈ stick બિંદુ નથી.
4. Parent પર height મર્યાદા (દા.ત. flex parent stretching items) પણ 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 headers, table headers, sidebars, અને "scrollspy" UIs ને કોઈ JavaScript વિના power કરે છે.
પરંતુ તેની quirks — خاص કરીને કે કોઈપણ ancestor પર overflow તેને સાહજિક રીતે તોડી દે છે — તે "આ stick કેમ નહીં કરે?" debugging ને વારંવાર સ્ત્રોત છે.
Containing-block scope અને overflow trap જાણવું જ તમને તેને વિશ્વાસપૂર્વક ઉપયોગ કરવા આપે છે.