48. مخطط التموضع: Sticky (الأفضل من العالمين)

position: sticky هو مخطط تموضع هجين. يتم التعامل مع العنصر كـ relative حتى يصل إلى عتبة إزاحة محددة، وعند هذه النقطة يصبح fixed بالنسبة لمنفذ العرض.

كيف يعمل التموضع اللزج

يكون العنصر في التدفق الطبيعي (relative).
يجب عليك تحديد عتبة باستخدام إحدى خصائص الإزاحة (top أو right أو bottom أو left).
عندما يتم تمرير الحاوية وتلمس حافة العنصر تلك العتبة المحددة، ينغلق العنصر في مكانه (fixed) حتى تخرج حاويته الأب تماماً من العرض.

css .sticky-header { position: sticky; top: 0; /* يصبح ثابتاً عندما تصل أعلى حافة للعنصر إلى أعلى منفذ العرض / background-color: white; padding: 10px; border-bottom: 1px solid #ccc; z-index: 10; / هام لضمان تراكبه فوق العناصر الأخرى */ }

متطلبات عمل Sticky

يجب أن تكون الحاوية الأب كبيرة بما يكفي للسماح للعنصر اللزج بالتمرير لفترة.
يجب تحديد قيمة إزاحة (top, right, bottom, أو left).
يجب ألا يكون لدى العنصر الأب overflow: hidden أو scroll أو auto ، لأن هذا يقيد سياق التمرير.