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

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

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

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

شاهد الفيديو

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

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

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

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