تثبيت القائمة العلوية عند الصعود للأعلى واخفائها عند النزول
السلام عليكم مرحبا بكم في درس جديد على مدونة technomee, اليوم سنقدم لكم طريقة
جديدة ورائعة لتثبيت القائمة العلوية, حيث انها تختفي عند النزول وتظهر عند الصعود
للأعلى بطريقة احترافية اي بطريقة لم تستعمل في بلوجر قط, هذه الاضافة سيحتاجها
العديد من المدونون, وعلى سبيل المثال بغرض تفكير الزائر بأقسام المدونة او الصفحات
وايقونات التواصل الاجتماعي عند رجوعه للأعلى, الإضافة تجعل من قالب مدونتكم اكثر
احترافية واتقان كما أن طريقة تركيبها سهلة جدا فقط تحتاج بعض التركيز .
إبحث عن الوسم </body> وضعه فوقه مباشرة.
تركيب بطريقة صحيحة
نبحث عن الوس ]]></b:skin> ثم نضع هذه الاكواد فوقها مباشرة
/* Floating Wrapper CSS by: btechnomee.blogspot.com*/
.float_wrapper{position:fixed;left:0;top:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:999999}
.scroll{top:-90px}
.no-scroll{top:0;z-index:999999}
ثانيا, وهذه أهم خطوة أن تعرف الوسم الصحيح للقائمة الذي تريد تثبيتها فقط اتبع
الخطوات التالية:
لإيجاد الوسم الخاص بالقائمة علينا وضع الماوس في القائمة ثم نضغط على
Inspecter كما في الصورة
ثم نبحث عنه في قالب المدونة ونضيف اليه الكود التالي كما موضح في هذه الصورة
float_wrapper
<script type='text/javascript'>
//<![CDATA[
// Floating Menu
$(function(){var e=$(document).scrollTop();var t=$(".float_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".float_wrapper").css("position","fixed")}else{$(".float_wrapper").css("position","fixed")}if(n>t){$(".float_wrapper").addClass("scroll")}else{$(".float_wrapper").removeClass("scroll")}if(n>e){$(".float_wrapper").removeClass("no-scroll")}else{$(".float_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
//]]>
</script>
والى هنا نكون قد انتيهنا من درس اليوم الى اللقاء ولكن قبل ذهابك نسيت التعليق
على الموضوع.
akram lam
just writer and ui&ux designer and web devolper
