كيف يعمل `position: sticky` بالفعل، ولماذا يفشل أحياناً؟

Question

Accepted Answer

`position: sticky` هو مزيج: العنصر يتصرف مثل `relative` (يبقى في التدفق العادي) **حتى** يتم التمرير إلى حد معين تحدده، ثم يتصرف مثل `fixed` (يبقى في المكان) — لكن فقط **بينما يكون كتلة احتوائه** على الشاشة.

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

قيمة `top` (أو `bottom`/`left`/`right`) **مطلوبة** — فهي تحدد الحد. بدونها، لا يفعل sticky شيئاً.

## النطاق: يلتصق فقط داخل العنصر الأب

عنصر sticky محصور في **حاوية العنصر الأب**. يلتصق أثناء التمرير *من خلال* هذا الأب، ثم يتمرر بعيداً عندما يتجاوز أسفل الأب. هذا هو ما يجعل "رؤوس الأقسام الملتصقة" تعمل — كل رأس يلتصق فقط بينما قسمه الخاص مرئي.

## لماذا غالباً "لا يعمل" — حالات الفشل

**1. أحد العناصر الأصلية له `overflow: hidden/auto/scroll`.** هذا هو السبب الأول. يتم كسر `position: sticky` بواسطة أي عنصر أب قابل للتمرير، لأن العنصر يلتصق بالنسبة إلى *ذلك* حاوية التمرير، وليس الصفحة:

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

**2. العنصر الأب ليس طويلاً بما يكفي.** يعمل sticky فقط إذا كان الأب أطول من عنصر sticky — إذا كان الأب بنفس الارتفاع، فلا يوجد شيء للتمرير من خلاله، لذا لن يبدو أنه يلتصق.

**3. لا يوجد حد معين.** نسيان `top`/`bottom` يعني عدم وجود نقطة التصاق.

**4. قيود الارتفاع على الأب** (مثل عنصر flex يمتد العناصر) يمكن أيضاً إزالة مساحة التمرير.

## قائمة التحقق من الأخطاء

```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` يدعم رؤوس الصفحة الملتصقة، رؤوس الجداول، الأشرطة الجانبية، وواجهات "scrollspy" بدون JavaScript.

لكن غرائبها — خاصة أن `overflow` على *أي* عنصر أب يكسرها بصمت — تجعلها مصدراً متكرراً لتصحيح الأخطاء "لماذا لن تلتصق؟".

معرفة نطاق كتلة الاحتواء وفخ overflow هي ما تسمح لك باستخدامها بموثوقية.