تثبيت القائمة العلوية عند الصعود واخفائها عند النزول

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


شرح طريقة التركيب
1. إبحث عن الوسم ]]></b:skin> وضعه الكود التالي فوقه مباشرة

الكود

<!-- Floating Wrapper by: www.Pro7web.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}


2. هذه أهم خطوة عليك أخي العزيز أن تعرف الوسم الصحيح للقائمة الذي تريد تثبيتها فقط اتبع الخطوات التالية ⬇
- وضع الماوس في القائمة ثم نضغط على " Inspecter " او على " فحص "
- سوف نجد اسم القائمة مثلا " nav " كما في مدونتنا
- سوف يظهر لك بهذا الشكل <div id="nav">
- نضيف الية float_wrapper
- ليصبح في النهاية <div id="float_wrapper nav">

3. إبحث عن الوسم </body> وضعه الكود التالي فوقه مباشرة

الكود

<script type='text/javascript'>
<!-- Floating Wrapper by: www.Pro7web.com -->
//<![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>

مبرووك عليك الاضافة 

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ