تثبيت القائمة الجانبية عند التمرير لأسفل أحدث إضافة THEIA STICKY SIDEBAR

أهلا أصدقائي .. في هذا البرنامج التعليمي سنكتشف سكريبت Sticky Sidebar الإصدار v1.7.0 والذي يعمل على صمغ أو تثبيت القوائم الجانبية لموقعك على الويب (أو أي عمود رأسي لهذه المسألة) ، مما يجعلها مرئية بشكل دائم عند التمرير للأعلى أوللأسفل. قمن المفيد جدا عندما يكون الشريط الجانبي طويلاً جدًا أو قصيرًا جدًا مقارنة ببقية المحتوى إستعمال هذه الميزة . كما أن السكريبت يعمل مع أي تصميم تقريبًا ويدعم العديد من الأشرطة الجانبية .. وهو متوفر أيضًا كمكون WordPress الذي يأتي مع لوحة الاستخدام.. أضف أنه داعم للمتصفحات و الذي أبهرني في هذا السكريبت دقته الذكية أو خوارزمية حساب الأبعاد لكل موضع يتم تفعيل عليه الخاصية وهذا إنعكس بإحترافية على التجاوب مع شاشات العرض الذكية وتكون النتيجة إفتراضية أي وكأنه غير موجود .. أضف أنك تستطيع تفعيل ميزة Sticky Sidebar على أكثر من قائمة خصوصا للقوالب التي صممت بقائمتين .. إذا فالنبدأ بالشرح.

support / jquery.nicescroll 3.5.4

6+IE
5+Chrome
4+Firefox
4+Safari
10+Opera
all Browser
2.2+android
all touch

معاينة الاضافة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير Edit HTML
إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية [وضع الأكواد]

قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

js
<script src='https://rawgit.com/mimomiko01/Sticky-Sidebar-v1.7.0/master/Sticky-Sidebar-min.js'/>

الكود هو مكتبة للميزة Sticky Sidebar مستضاف في موقع خارجي جيد حتى لا نثقل على القالب بالأكواد و في حالة لم يعمل ضعه اسفل <head> مع اكواد المكتبات والخطوط الخاصة بك كما أنك تستطيع تحميل السكريبت الأصلي من خلال أداة التحميل في القائمة الجانبية .

أخيرا قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

js

<script type='text/javascript'>
//<![CDATA[
var $StickySidebar = jQuery.noConflict();
$StickySidebar(document).ready(function(){
    "use strict";
/*
 ---------------------
//StickySidebar
 ---------------------
*/
    $StickySidebar(".sidebar").theiaStickySidebar({
        additionalMarginTop: 30,
         additionalMarginBottom: 0,
    });

}); // End $StickySidebar(document).ready(function(){

//]]>
</script>

الكود هو ترتيب المعلمات للميزة Sticky Sidebar أي من خلاله سنستطيع التحكم في الموضع العمودي للقائمة الجانبية والتي سنشرحها كالتالي ...

التعديل على الكود

الكود المحدد بهذا اللون خاص بتغيير نسبة البعد عن رأس القالب أفضل قيمة من 0 إلى 100

الكود المحدد بهذا اللون خاص بتغيير نسبة البعد عن تذييل القالب أفضل قيمة هي 0

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

الأن بعد وضع الأكواد سننتقل لتفعيل السكريب على القائمة الجانبية للقالب أو تفعيله على أكثر من قائمة.

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة [تفعيل السكريب على القوائم]

قم بالبحث عن الوسم الرئيسي للقائمة الجانبية في الغالب يكون بهذا الإسم sidebar-wrapper ستحرص على أن يكون الكلاس هو نفسه الموجود في السكريبت مثال ..

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

الآن قم بإضافة عنصر إحتواء جديد أسفل العنصر الرئيسي sidebar-wrapper للقائمة الجانبية الذي سبق التعديل عليه ثم نجعل الكلاس الخاص بالعنصر الجديد بهذا الإسم theiaStickySidebar وهذا مهم لتكون النتيجة كالآتي ..

HTML
     <div class='sidebar-wrapper'>
        <div class='theiaStickySidebar'> 
     
  ... موضع جميع الأدوات في القائمة الجانية ...
 
         </div><!-- /theiaStickySidebar -->
     </div><!-- /sidebar-wrapper -->

الخطوة الأخيرة [تفعيل السكريب على قائمة ثانية]

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

js
<script type='text/javascript'>
//<![CDATA[
var $StickySidebar = jQuery.noConflict();
$StickySidebar(document).ready(function(){
    "use strict";
/*
 ---------------------
//StickySidebar
 ---------------------
*/
    $StickySidebar(".sidebar-wrapper, .sidebar-2").theiaStickySidebar({
        additionalMarginTop: 30,
         additionalMarginBottom: 0,
    });

}); // End $StickySidebar(document).ready(function(){

//]]>
</script>

الى هنا وينتهى الموضوع لا تنسى مشاركة الموضوع ليستفيد الجميع ولا تنسى ان تقوم بالنقر على زر المتابعه للتوصل بكل جديد "فى أمان الله"
ان واجهتك اى مشكلة فقط ضعها فى تعليق وسوف يتم الرد فور رؤية التعليق مباشرة وسيتم حل المشكلة بأذن الله.

شارك الموضوع مع أصدقائك :

4 comments:

Mo Gamal الكاتب June 2, 2018 at 2:35 PM

https://1.bp.blogspot.com/-880tCwPCdBI/WqgbMoC6XgI/AAAAAAAACkw/DWRjsPmJRZctnSJH86c0WUNW9Wlj6JwxQCLcBGAs/s640/Sticky%2BSidebar%2Bv1.7.png

رد حذف

Mo Gamal الكاتب June 2, 2018 at 5:22 PM

function zerClose(){
document.getElementById("zer-cog").style.display = "block";
document.getElementById("zer-close-switcher").style.display = "none";
document.getElementById("options-template").style.right = "-226px";
}
function zerOpen(){
document.getElementById("zer-close-switcher").style.display = "block";
document.getElementById("zer-cog").style.display = "none";
document.getElementById("options-template").style.right = "0";
}

ايمان June 20, 2020 at 1:45 PM

حضرتك مش عارفة اثبت القائمة الجانبية ممكن تساعدنى

ايمان June 20, 2020 at 1:46 PM

ده اميلى emandodo97@gmail.com

الأبتساماتأخفاء الأبتسامات

بحث في المدونة

قالب بلوجر كود

Friday, March 16, 2018

تثبيت القائمة الجانبية عند التمرير لأسفل أحدث إضافة THEIA STICKY SIDEBAR

support / jquery.nicescroll 3.5.4

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية [وضع الأكواد]

التعديل على الكود

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة [تفعيل السكريب على القوائم]

الخطوة الأخيرة [تفعيل السكريب على قائمة ثانية]

الكاتب : Mo Gamal

Mo Gamal