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








وايضا ً يمكنك رؤية مثال على الواقع هنا في معهد ترايدنت فموقع ترايدنت الرئيسي Traidnt يستخدم نفس الكود ولكن باضافات اخرى ولكن الفكرة هي نفسها

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

وهذا ما سوف اقوم بشرحة باذن الله

اولا ً سوف نقوم بتضمين مكتبة الجيكوري وفي مثالنا قمت بوضع الملف في نفس المجلد
    <script type="text/javascript" src="jquery.js"></script> 

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

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

       
height180px;
       
background#393939;
       
positionfixed;
       
width100%;
       
line-height140px;
    }
    
    .
header_sticky {
        
height40px;
        
background#11B7C3;
        
line-height0px;
    }
سوف تلاحظون انني قمت بوضع ال 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 الى قيمته الاصلية اتمنى ان تقومون بالتجربة واي سؤال حاضرين واتمنى ان يكون الدرس واضح واعتذر لو كان مكررا ُ المثال في المرفقات
احترامي وتقديري اخوكم شقاوي

http://www.traidnt.net/vb/traidnt2517958 , demo :Shqawe Sticky Hedaer