التخطي إلى المحتوى
primary-original-2-800x465 Header ثابت و متفاعل
Header ثابت و متفاعل

Header ثابت و متفاعل

كثير من المواقع العربية والاجنبية تستخدم نفس الكود اللذي سوف اشرحه في درسنا
وايضا ً يمكنك رؤية مثال على الواقع هنا في معهد ترايدنت فموقع ترايدنت الرئيسي Traidnt يستخدم نفس الكود ولكن باضافات اخرى ولكن الفكرة هي نفسها
ايضا ً في سكربت ترايدنت الاخبار التقنية نفس الحركة موجودة وهي عند تحريك الصفحة الى الاسفل فان الهيدر يتغير حجمه ويصبح ظاهر في اعلى الصفحة رغم تحريكك للصفحة الى الاسفل
وهذا ما سوف اقوم بشرحة باذن الله

اولا ً سوف نقوم بتضمين مكتبة الجيكوري وفي مثالنا قمت بوضع الملف في نفس المجلد

 <script type=”text/javascript” src=”jquery.js“></script>

بعد ذلك قمت بانشاء كود html بسيط يتكون من div واحد فقط اسميته هيدر كالمثال التالي

<div class=”header”>
</div>

بعد ذلك اضفت استايل خاص فيه كلاسين وهنا نقطة مهمه سوف اشرحها بعد عرض الكود

.header {
height: 180px;
background: #393939;
position: fixed;
width: 100%;
line-height: 140px;
}

.header_sticky {
height: 40px;
background: #11B7C3;
line-height: 0px;
}

سوف تلاحظون انني قمت بوضع ال position للكلاس header على انه fixed وهذا معناه ان يبقى ال div مكانه حتى مع تحريك الصفحه
وبعد ذلك اضفت كلاس اخر باسم header_sticky وهذا الكلاس اللذي سوف يتغير عند تحريك الصفحة الى الاسفل كيف يكون ذلك
يكون ذلك ببساطة بهذا الكود الخاص بمكتبة الجيكويري وبالشكل التالي:

 <script type=”text/javascript”>
<!–
$(function(){
$(window).scroll(function(){

if ($(this).scrollTop() > 1){
$(‘.header’).addClass(“header_sticky”);
}
else{
$(‘.header’).removeClass(“header_sticky”);
}

});

});
–>
</script>

دعونا نشرح الكود

ببساطة عملت شرط وهو انه اذا تحركت الصفحة وكان الحريك اكبر من 1 و الرقم 1 هو المسافة بين حد الصفحة العلوي وبين الهيدر بمعنى لو اردنا تطبيق هذه الحركة على النافبار وكان الناف بار يبتعد عن الحد العلوي بمقاس 400px
فسوف نغير الرقم من 1 الى 400 اتمنى وضحت الفكرة
المهم اذا تحركت الصفحة وكانت المسافة اكبر من 1 قم بحذف الكلاس header واضف مكانه الكلاس header_sticky والا قم بالعكس تمام اي ارجاع ال div الى قيمته الاصلية
اتمنى ان تقومون بالتجربة واي سؤال حاضرين واتمنى ان يكون الدرس واضح واعتذر لو كان مكررا ُ
المثال في المرفقات

التعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *