🎯 ما هو الـ Sticky Positioning وكيف يغير تجربة التصفح؟

الـ Sticky Positioning هو أحد قيم خاصية position في CSS التي تتيح لعنصر أن يتصرف كعنصر عادي (static) حتى يصل إلى موقع معين في نافذة المتصفح، ثم يثبت في مكانه أثناء التمرير! 🌟 فكر فيه كشريط تنقل يتبعك أثناء تصفحك لصفحة طويلة.

📍 الفرق بين Sticky ومواقع CSS الأخرى

لفهم Sticky بشكل أفضل، دعنا نقارنه ببقية قيم position:

  • static (افتراضي): يتبع تدفق الصفحة الطبيعي
  • relative: يمكن تحريكه نسبياً من موقعه الأصلي
  • absolute: يخرج من تدفق الصفحة ويتم وضعه بالنسبة لأقرب عنصر أب
  • fixed: يثبت بالنسبة لنافذة المتصفح دائماً
  • sticky: مزيج بين relative وfixed - عادي ثم يثبت! 🤝
/* مثال مقارنة بسيط */
.normal-element {
    position: static; /* افتراضي */
}

.sticky-element {
    position: sticky;
    top: 0; /* الشرط السحري! */
}

🛠️ الخطوات العملية لإنشاء عنصر Sticky

الخطوة 1: تحديد العنصر المراد تثبيته

اختر العنصر الذي تريد أن يثبت أثناء التمرير، مثل شريط التنقل أو عنوان قسم.

الخطوة 2: تطبيق خاصية position

اجعل قيمة position تساوي sticky.

الخطوة 3: تحديد نقطة التثبيت

استخدم إحدى الخصائص (top, bottom, left, right) لتحديد متى وأين يثبت العنصر.

.header {
    position: sticky;
    top: 20px; /* سيثبت عندما يبعد 20px عن أعلى الصفحة */
    background-color: white;
    padding: 10px;
}

💡 أمثلة عملية واقعية

مثال 1: شريط تنقل يثبت من الأعلى

<nav class="main-nav">شريط التنقل الرئيسي</nav>
<section>محتوى الصفحة الطويل...</section>

.main-nav {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 15px;
    z-index: 1000; /* للتأكد من بقائه فوق العناصر الأخرى */
}

مثال 2: عناوين الأقسام تثبت أثناء التمرير

<section>
    <h2 class="section-title">القسم الأول</h2>
    <p>محتوى القسم...</p>
</section>
<section>
    <h2 class="section-title">القسم الثاني</h2>
    <p>محتوى القسم...</p>
</section>

.section-title {
    position: sticky;
    top: 60px; /* يثبت أسفل شريط التنقل */
    background-color: #f0f0f0;
    padding: 10px;
    margin-top: 20px;
}

⚠️ نصائح مهمة وأخطاء شائعة

  1. لا تنسى تحديد top أو bottom: بدونها، لن يعمل Sticky!
  2. التأكد من أن العنصر الأب ليس له overflow مخفي: قد يمنع ذلك عمل Sticky.
  3. استخدم z-index بحكمة: لتجنب تداخل العناصر.
  4. اختبر على أجهزة مختلفة: قد تختلف التجربة على الشاشات الصغيرة.
/* مثال صحيح */
.correct-sticky {
    position: sticky;
    top: 0; /* مطلوب للعمل */
    z-index: 10;
}

/* مثال خاطئ */
.wrong-sticky {
    position: sticky;
    /* نسيان top سيجعله لا يعمل */
}

🎨 تحدي عملي صغير

جرب هذا التحدي البسيط: أنشئ صفحة تحتوي على:

  • شريط تنقل يثبت في الأعلى عند التمرير
  • عدة أقسام بعناوين تثبت أسفل شريط التنقل
  • محتوى طويل enough لملاحظة تأثير التثبيت
<!DOCTYPE html>
<html>
<head>
    <style>
        nav {
            position: sticky;
            top: 0;
            background: blue;
            color: white;
            padding: 15px;
        }
        
        h2 {
            position: sticky;
            top: 50px;
            background: lightgray;
            padding: 10px;
        }
        
        section {
            height: 500px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <nav>شريط التنقل الثابت</nav>
    
    <section>
        <h2>القسم 1</h2>
        <p>محتوى القسم الأول...</p>
    </section>
    
    <section>
        <h2>القسم 2</h2>
        <p>محتوى القسم الثاني...</p>
    </section>
</body>
</html>