طريقة تثبيت قائمة الاقسام العلويه عند تمرير الصفحه للاسفل

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

سنتطرق سويا على كيفية التعديل على قالب بلوجر لتثبيت قائمة الاقسام بشرح عملى سوف ارفق لكم فيديو شرح عملى كامل بكيفية التعديل حتى يتثنى لكم فهم الموضوع بشكل ميسر.

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

شاهد الفيديو

فيدو شرح تثبيت قائمة الاقسام العلويه عند تمرير الصفحه

يمكنك نسخ الاكواد بالشرح  من الصندوق التالى

يوضع الكود الاول اعلى وسم اغلاق ال body

<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> 

يجب عليك تغير #menu باسم الكلاس او الديف الخاص بالقائمه

الكود الثانى يوضع اعلى وسم اغلاق b:skin

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;
}

يجب تغيير example باسم الديف او الكلاس الخاص بالقائمه

وهكذا نكون قد انتهينا من موضوع حلقة اليوم اتنمنى ان تكونو قد استفدتم من الموضوع وان اعجبك لا تنسى مشاركته مع الاصدقاء حتى تعم الفائده ولا تنسى الاشتراك فى قناتنا على اليوتيوب حتى تكون اول المستفيدين من شروحاتنا والى اللقاء فى موضوع جديد على مدونة تى جو .