كيفية إخفاء وإظهار الهيدر العلوي القائمة الرئيسية عند التمرير لأعلى ولأسفل او عمل اسكرول داون او اسكرول آب
How To Hide And Show The Header In Scrolling Up And Down
مقدمة
يعد الهيدر العلوي من أهم القطع الأساسية فى بناء قالب الموقع او المدونة بلوجر فهو عنصر رئيسي يحتوي بداخلة قائمة الأقسام الرئيسية للموقع وأيضا يحتوي أشياء أخري وقوائم وعناصر أساسية لأنه الواجهة الرئيسية للموقع فعند تصفح الزائر للموقع او للمدونة الخاصة بك يكون الهيدر ثابت وأساسي على كل الصفحات لأنه عنصر رئيسي يحتوي كل روابط وصفحات الموقع فى مكان واحد ، الهيدر العلوي يكون هو أول عنصر فى أعلى الصفحات جيمعهم لذلك عند تصفح الزائرين للموقع يكون ثابتاً وهذا الثبات يسبب بعض الضيق وعدم الراحه فى بعض الأحيان لأنه يأخذ مساحه داخل الصفحة وبالطبع لا يمكن إخفائه لأى سبب ، لذلك تطلب الأمر تدخل من الجافاسكربت وهذا للتأثير على عنصر الهيدر العلوي وجعله ديناميكيا ليس استاتيكيا وهذا من خلال أمران مهمان الأول عندما يقوم المستخدم بالنزول إلي أسفل من خلال اسكرول داون يتم إخفاء الهيدر لكن عندما يقوم الزائر بالصعود إلي أعلى من خلال اسكورل آب يتم إظهار الهيدر ، فكيف نقوم بهذا الأمر الرائع ، لنتابع هذا الشرح الهام للغاية.
شرح التركيب
1- CSS - الستايل
يتم وضع الستايل داخل استايل القالب اى فوق اغلاق الوسم
]]></b:skin>
2- HTML - الكود
يتم إضافة آي دي إلي الديف الخاص بالهيدر
إذا كان على هذا الشكل مثلا :
<div class='header-top'>
فيتم إضافة آي دي
site-header
ليصبح على الشكل التالي :
<div class='header-top' id='site-header'>
3- JS - السكربت
يتم وضع السكربت اعلى اغلاق البودي اى فوق الوسم
</body>
الشرح بالفيديو
معاية
التحميل
الإنشاء
07 ديسمبر 2021
آخر تحديث
المشاهدات
إذا واجهتك اى مشكلة اكتب كومنت هنا وسوف نحلها لك
ردحذف