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

    واتساب

    مقالات متعلقة

    إرسال تعليق