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

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

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

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


تعليقان (2)

  1. واصل
    1. اسعدتنى زيارتك