2/27/2018

settings_overscan print announcement
أهلا..في هذا البرنامج التعليمي والذي سنتعرف فيه على أبسط  طريقة جيدة لتثبيت القائمة الرئيسية (الأفقية) عند التمرير للأسفل ..ولمن لايعلم هناك العشارات من الأكواد التي تعمل على هذه الميزة وكلها متفاوتة من حيث الديناميكية البرمجية.

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






لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ...

  • 
    
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
      //fixed secondary nav
      var secondaryHead = $('#menu'),
     secondaryHeadTopPosition = secondaryHead.offset().top;
      $(window).on('scroll', function(){
      if($(window).scrollTop() > secondaryHeadTopPosition ) {
       secondaryHead.addClass('f-nav').css({
             'position':'fixed',
             'width':'100%',
             'right':'0',
             'top':'0',
             'margin':'0',
             'padding':'5px 0',
             'z-index':'10'
              }); 
      } 
        else {
       secondaryHead.removeClass('f-nav').removeAttr( 'style' );
      }
     });
      
      //header img
      var introSection = $('#header img'),
     introSectionHeight = introSection.height(),
      //change scaleSpeed if you want to change the speed of the scale effect
     scaleSpeed = 0.4;
      //change opacitySpeed if you want to change the speed of opacity reduction effect
     opacitySpeed = 1; 
      
     $(window).on('scroll', function(){
      window.requestAnimationFrame(animateIntro);
     });
     //assign a scale transformation to the introSection element and reduce its opacity
     function animateIntro () {
      var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
       scaleValue = 1 - scrollPercentage*scaleSpeed;
      //check if the introSection is still visible
      if( $(window).scrollTop() < introSectionHeight) {
       introSection.css({
        'transform': 'scale(' + scaleValue + ') translateZ(0)',
        'opacity': 1 - scrollPercentage*opacitySpeed
       });
      }
     }
    
    
    });//end
    //]]>
    </script> 
    

    التعديل على كود js
    الإسم #menu المحدد بهذا اللون خاص بمعرف القائمة إستبدله بالآيدي أو الكلاس للقائمة الخاصة بك .. تستطيع أن تعرفه من خلال فتح مصدر الصفحة ثم بإستعمال سهم التحديد أشر فوق القائمة الرئيسية أول عنصر هو المعرف الخاص بها ..أنظر للصورة

    لاحظ أن القائمة تحتوي في المثال على class وهو site-nav أما id فهو menu سنضع فقط واحد من هما مع مراعات أنك إذا وجدت class ستضع أمامه نقطة .site-nav أما id الأيدي نضع أمامه مربع #menu
    الكود المحدد بهذا اللون خاص بتأثير التعتيم على الشعار عند التمريد في حالة أردت حذفه إحذفه كاملا كماهو محدد.
  • وفي الأخير قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ...

  • 
    example {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    

    التعديل على كود Css
    ضع مكان الكلمة example المعرف الخاص بك الذي سبق وأضفته سواء كان الكلاس class أو الآيدي id




add_commentإرسال تعليق

إرسال تعليق