تثبيت القائمة الرئيسية في رأس القالب عند التمرير للأسفل

• اضافات بلوجر بلوجر حلقات
• تثبيت القائمة الرئيسية في رأس القالب عند التمرير للأسفل

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

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

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

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

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

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

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

Javascript

<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 المحدد بهذا اللون خاص بمعرف القائمة إستبدله بالآيدي أو الكلاس للقائمة الخاصة بك .. تستطيع أن تعرفه من خلال فتح مصدر الصفحة ثم بإستعمال سهم التحديد أشر فوق القائمة الرئيسية أول عنصر هو المعرف الخاص بها ..أنظر للصورة

وضعه بدل المعرف menu والى هنا ينتهى الشرح الى اللقاء فى دروس قادمة.

ان واجهتك مشكلة لا تتردد ان تضعها فى تعليق وسوف يتم الرد عليها فور رؤية  التعليق.

شارك الموضوع مع أصدقائك :