الشرح 152: كيفية تثبيت شريط الاقسام العلوي لبلوجر عند التمرير الى اسفل


{tocify}
مرحبا اصدقائي الكرام فى درس مفيد على منصة بلوجر حيث فى هذه الحلقة سوف نتطرق الى كيف تقوم بثتبيث اي اضافة من اضافات بلوجر الموجودة على قالبك و فى هذا الدرس سوف نطبق مثالنا على تثبيث القائمة العلوية الخاصة بالاقسام او الصفحات حيث عندما يقوم الزائر بالنزول والتمرير الى اسفل موقعك سيتم تثبيث الاضافة لتكون ظاهرة امامه دائما . ولايحتاج الى الصعود لرؤيتها

ماسنتعلمه فى هذه الحلقة كالتالي :
- تثبيث القائمة العلوية للاقسام باشكال مختلفة .
- تثبيث القائمة العلوية للاقسام على مظهر الحاسوب و مظهر الموبايل .
- تثبيث القائمة العلوية للاقسام بشكل منفصل فى مظهر الحاسوب و مظهر الموبايل .
- التعديل على الاكواد بشكل احترافي .

طريقة تثبيت شريط اقسام واضافات بلوجر عند نزول الى اسفل

الاكواد المستعملة فى الدرس
1- اضافة اكواد CSS
.stick-navigation{
 z-index: 9999;
 position: fixed;
 top: 0;
 width: 100%;
}

2- اضافة السكريبت
<script type="text/javascript">
 var _rys = jQuery.noConflict();
 _rys("document").ready(function () {
 _rys(window).scroll(function () {
 if (_rys(this).scrollTop() > 136) {
 _rys('.stick-navigation').addClass("fixed-nav");
 } else {
 _rys('.stick-navigation').removeClass("fixed-nav");
 }
 });
 });
 </script>

3- اضافة اكواد HTML
<div class="stick-navigation">
</div>
ان اعجبتك الحلقة شاركها مع اصدقائك

أحدث أقدم