position: sticky உண்மையில் எப்படி வேலை செய்கிறது, மற்றும் அது ஏன் சில நேரங்களில் தோல்வியடைகிறது?

Question

Accepted Answer

`position: sticky` என்பது ஒரு கலப்பினம்: ஒரு கூறு, நீங்கள் குறிப்பிடும் ஒரு threshold-க்கு scroll ஆகும் **வரை** `relative` போல (சாதாரண flow-இல் இருக்கிறது) நடந்துகொள்கிறது, பின்னர் `fixed` போல (இடத்தில் ஒட்டிக்கொள்கிறது) நடந்துகொள்கிறது — ஆனால் அதன் **containing block** இன்னும் திரையில் இருக்கும்போது மட்டுமே.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`top` (அல்லது `bottom`/`left`/`right`) மதிப்பு **அவசியம்** — அது threshold-ஐ வரையறுக்கிறது. அது இல்லாமல், sticky எதுவும் செய்யாது.

## நோக்கம்: அது அதன் parent-க்குள் மட்டுமே ஒட்டுகிறது

ஒரு sticky கூறு அதன் **parent container**-க்குள் வரம்புக்குட்பட்டது. அந்த parent வழியே scroll செய்யும்போது அது ஒட்டுகிறது, பின்னர் parent-இன் கீழ் முனை கடந்ததும் scroll ஆகி விலகுகிறது. இதுதான் "sticky section header-கள்" வேலை செய்ய வைக்கிறது — ஒவ்வொரு header-ம் அதன் சொந்த section பார்வையில் இருக்கும்போது மட்டுமே ஒட்டுகிறது.

## அது ஏன் பொதுவாக "வேலை செய்யாது" — தோல்வி நிலைகள்

**1. ஒரு ancestor-க்கு `overflow: hidden/auto/scroll` உள்ளது.** இதுதான் முதல் காரணம். எந்த ஒரு scrollable ancestor-ஆலும் sticky positioning உடைகிறது, ஏனெனில் கூறு page-க்குப் பதிலாக *அந்த* scroll container-க்குச் சார்பாக ஒட்டுகிறது:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. parent போதுமான உயரம் இல்லை.** parent, sticky கூறை விட உயரமாக இருந்தால் மட்டுமே sticky-க்கு ஒட்ட இடம் உள்ளது — parent அதே உயரம் என்றால், scroll செய்ய எதுவும் இல்லை, எனவே அது ஒருபோதும் ஒட்டுவது போல் தோன்றாது.

**3. threshold அமைக்கப்படவில்லை.** `top`/`bottom`-ஐ மறப்பது என்பது ஒட்டும் புள்ளி இல்லை என்பதாகும்.

**4. parent-இல் உயரக் கட்டுப்பாடுகள்** (எ.கா. ஒரு flex parent item-களை நீட்டுவது) கூட scroll இடத்தை அகற்றலாம்.

## Debugging சரிபார்ப்புப் பட்டியல்

```text
✓ 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 header-கள், table header-கள், sidebar-கள், மற்றும் "scrollspy" UI-களுக்குச் சக்தியளிக்கிறது.

ஆனால் அதன் வினோதங்கள் — குறிப்பாக *எந்த* ancestor-இல் உள்ள ஒரு `overflow` அதை அமைதியாக உடைப்பது — அதை "இது ஏன் ஒட்டாது?" என்ற debugging-இன் அடிக்கடியான மூலமாக ஆக்குகின்றன.

containing-block நோக்கத்தையும் overflow கண்ணியையும் அறிந்துகொள்வதே அதை நம்பகமாகப் பயன்படுத்த உங்களை அனுமதிக்கிறது.