عندما تتطلع لجعل عنوان (Header 1) يظل في أعلى الصفحة أثناء تمرير المستخدم لأسفل أو لأعلى، فإنك في الحقيقة ترغب في إنشاء تأثير يُعرف عادةً بالتصاعد العائم (Sticky Header) أو القائمة العائمة (Floating Menu)، والذي يعتبر من التقنيات الشائعة في تصميم واجهات الويب الحديثة.

لتحقيق هذا التأثير، يمكنك استخدام الـ CSS (واجهة تنسيق الأنماط) بسهولة. أولاً وقبل كل شيء، يجب عليك تحديد العنصر الذي ترغب في جعله عائمًا. في هذه الحالة، سنستخدم عنصر

كمثال. ثم يجب عليك تحديد النقطة الثابتة للعنصر العائم، والتي في حالتنا هي أعلى الصفحة.

الأنماط التالية ستقوم بتحقيق هذا التأثير:

css
h1 {
    position: sticky;
    top: 0;
    background-color: white; /* تغيير لون الخلفية حسب الحاجة */
    z-index: 1000; /* يضمن عرض العنوان فوق أي عناصر أخرى */
    width: 100%; /* جعل عنصر العنوان يمتد على عرض الصفحة بالكامل */
    padding: 10px; /* إضافة هامش داخلي لتحسين المظهر */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* إضافة ظل للعنوان لتحسين المظهر */
}

هذه الأنماط تقوم بتحديد عنصر

وتجعله عائمًا (sticky) في أعلى الصفحة (`top: 0`) بالنسبة للشاشة، وبالتالي سيظل العنوان ثابتًا عند التمرير لأسفل أو لأعلى.

يمكنك إضافة هذا الكود إلى ملف CSS الخاص بك، أو يمكنك وضعه داخل عنصر