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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

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

1 . نتوجه لقالب >> تحرير

2. ابحث بإستعمال CTRL+F عن <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

.stick-navigation{
 z-index: 9999;
 position: fixed;
 top: 0;
 width: 100%;
}

5. ابحث عن : <head/>

6. ضع الكود التالي قبله [ فوقه ]

<script type="text/javascript">
 var _rys = jQuery.noConflict();
 _rys("document").ready(function () {
 _rys(window).scroll(function () {
 if (_rys(this).scrollTop() > 136) {
 _rys('.stick-navigation').addClass("fixed-nav");
 } else {
 _rys('.stick-navigation').removeClass("fixed-nav");
 }
 });
 });
 </script>

* الأن وصلنا للمرحلة الأخيرة والتي ستطبق بها ثبيت القائمة

ـــ إذا كانت لديك قائمة علوية أو ثانوية وتريد تثبيت القائمة العلوية كل ما عليك فعله هو البحث عن كلمة متواجدة بالقائمة مثلا الرئيسية عندها سنجد فوقها أكواد مثال

<div class="stick-navigation"><div id='ar1web-menu'>
 <ul>
 <li><a href="#">الرئيسية</a></li>
 <li><a href="#">نبذة</a></li>
 <li><a href="#">خدمات</a></li>
 <li><a href="#">اتصل بنا</a></li>
 </ul>
 </div>

* العنصر الملون بالأصفر هو الكود الخاص بالقائمة كل قائمة تختلف عن بقيتها لذا قد يكون هناك أكثر من كودين ضع فوقهما هذا

الكود : <div class="stick-navigation">

7. حفظ العمل ثم إذهب للمعاينة

لمن واجه صعوبة في تطبيق المرحلة الأخيرة يمكنك الإستفسار بوضع تعليق برابط مدونتك وسيتم تعريفك على الكود الخاص بك لكم مني أجمل تحية، بالتوفيق للجميع.

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 10 تعليقات:

ألمـبدع العربي7/24/2014
موضوع جميل و جيد
=> profissional3.blogspot.com
ردحذف
الردود
Mostafa11/04/2014
جميل اخي ولاكن يقول لي هناك خطئ

‏حدث خطأ أثناء تحليل XML، في السطر 3511، العمود 10: The element type "div" must be terminated by the matching end-tag "</div>". إخفاء الإشعار

ردحذف
الردود
Ahmmad Ali Alalawneh1/10/2015
السلام عليكم اخي..

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

فما هو الحل واشكرك جزيلا على الموضوع الجميل
ردحذف
الردود
OMRAN ALHARIRI2/13/2015
قمت بعملها ولكن لم تنجح هذا رابط مدونتي http://th3geekweb3.blogspot.com
وهذا حسابي عى الفيس بوك http://fb.com/3mran.al7ariri ارجو منك حل لهذه المشكلة
ردحذف
الردود
زياد3/22/2015
طب لو عايز اعمل القائمة دي في اسفل المدونة و تكون بنفس الصفات بتتحرك و مش شرط يكون فيها قوائم منسدلة ؟!
هل دة ممكن ؟!
ردحذف
الردود
Houssam Baha3/22/2015
نعم يمكن أضف فقط في كود Css هذا المعرف : bottom: 0;
ردحذف
الردود
Zied Zaabi4/11/2015
لم تنجح
ردحذف
الردود
َAdmin3/16/2016
من يستطيع مساعدتي في مشكلة لااستطيع تغير اي شيئ في تخطيط مدونتي بسبب اختفاء التخطيط
ردحذف
الردود
mo7etarif alma3elomiyat6/14/2016
السلام عليكم اخي اين ساضع الكود الثاني
ردحذف
الردود