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

شرح طريقة ثتبيث اضافات بلوجر عند التمرير و النزول الى اسفل , تثبيت القائمة العلوية عند تمرير الصفحة للأسفل , طبعا يمكن إستخدام الطريقة حتى على قوائم أخرى على شرط أن تكون في الهيدر ، الفائدة من تثبيت القائمة عند تمرير الصفحة للأسفل هو منح المتصفح إمكانية التنقل بين مختلف أقسام الموقع بسهولة تامة، دون الحاجة إلى تمرير الصفحة إلى الأعلى في كل مرة
مرحبا اصدقائي الكرام فى درس مفيد على منصة بلوجر حيث فى هذه الحلقة سوف نتطرق الى كيف تقوم بثتبيث اي اضافة من اضافات بلوجر الموجودة على قالبك و فى هذا الدرس سوف نطبق مثالنا على تثبيث القائمة العلوية الخاصة بالاقسام او الصفحات حيث عندما يقوم الزائر بالنزول والتمرير الى اسفل موقعك سيتم تثبيث الاضافة لتكون ظاهرة امامه دائما . ولايحتاج الى الصعود لرؤيتها

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

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

الاكواد المستعملة فى الدرس
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>
ان اعجبتك الحلقة شاركها مع اصدقائك

صفحة تحويل الروابط