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

معاينة 

معاينة

شرح طريقة التركيب

أولا, نبحث عن الوس ]]></b:skin> ثم نضع هذه الاكواد فوقها مباشرة

/* Floating Wrapper CSS by: nak1ha.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 كما في الصورة (إضغط على الصورة لتتضح لك الصورة جيدا)

ثم نبحث عنه في قالب المدونة ونضيف اليه الكود التالي كما موضح في هذه الصورة ⬇⬇

  class='float_wrapper'

 الأن تبقى لنا خطوة آخيرة وهي لوضع الجافا سكريبت, إبحث عن الوسم </body> وضعه فوقه مباشرة.

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

ثم احفظ القالب, كان هذا كل مافي الموضوع نتمنى ان يعجبكم الموضوع وأن تشتغل معكم الطريقة على أكمل وجه, انتضرونا في موضوع جديد !! دمتم في آمان الله