من خلال هذه التدوينة سنتعرف سويا على طريقة تجعل اى قطعة بالمدونة ثابتة فى مكانها لا تتحرك كما يقال البعض عائمة مثل اضافات بلوجر الذى نراها بالمدونات كأضافة ايقونات المشاركات الاجتماعية الشريط الجانبى نجدها ثابتة فى مكانها لا تتحرك مع تحريك السكرول بار مثل ايضا هذه التدوينة اضافة ايقونات المشاركات الأجتماعية منزلقة بأعلى المدونة بشكل رائع . هذه الطريقة مفيدة لمن لدية اضافة هامة ويريد اظهارها باصفحة المدونة لن اطيل عليكم اكثر .
قبل ان ندخل فى كيفية تشغيل الطريقة يجب ان تعلم اولا الأسم المعرف لأى قطعة ID .
معرفة ID القطعة :
اولا قم بنسخ اسم الاضافة لديك مثلا لو لديك اضافة اسمها اقسام الموقع قم بنسخها ثم اذهب الى قالب مدونتك واضغط على تحرير HTML كما تلاحظون :
الان ابحث عن اسم الأضافة عن طريق ازرر الكيبورد بالضغط على CTRL+F واضغط بحث
ستجد اسم الاضافة وبجانبها اسم المعرف
مثال مصور للتوضيح اكثر :
لو كنت تريد معرفة اسم قطعة المشاركات الشائعة مثلا وبعد البحث عنها بالقالب ستجد اسم المعرف ID بجانبها وهذه صورة توضيحية :
كما تلاحظون من خلال الصورة السابقة والمحددة باللون السماوى هو اسم المعرف ID
اعتقد الطريقة سهلة لمعرفة ID اى اضافة لديك بالمدونة .
كيفية جعل الاضافة عائمة :
قم بالبحث عن :
</body>اضف قبلة مباشرة هذا الكود :
<script>الان ضع اسم المعرف ID الاضافة مكان كلمة ضع اسم المعرف هنا المحدد باللون الاحمر
//<![CDATA[
rb_makeSticky(" ضع اسم المعرف هنا");
function rb_makeSticky(elem) {
var rb_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);
var width = rb_sticky.offsetWidth;
var iniClass = rb_sticky.className + ' rb_sticky';
window.addEventListener('scroll', rb_sticking, false);
function rb_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
rb_sticky.className = iniClass + ' rb_sticking';
rb_sticky.style.width = width + "px";
} else {
rb_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>
بالأخير اضغط على حفظ واذهب الى الصفحة الرئيسية للمدونة لتشاهد النتيجة ستجد بأن الاضافة عائمة فى مكانها .
ملحوظة هامة :
لكى تنجح معك هذه الطريقة وتعطيك شكل اجمل ولا تزعج الزوار يجب ان تختار الاضافة الأخيرة المتواجدة بالمدونة بمعنى الترتيب
وهذه صورة توضح مفهوم كلامى بماذا اقصد ؟
كما تلاحظون بالصورة السابقة اخر اضافة مضافة انضم الينا فهى اخر اضافة مضافة بالمدونة هذا ما اقصدة السبب فى ذلك اذا تم اختيار اضافة ادعم صفحتنا مثلا الاضافة الاولى سنجد بأن هذه الاضافة عائمة وباقية الاضافات تتحرك بداخلة وتعطى شكل غير جميل للمدونة .
فى النهاية ارجو بأن هذه التدوينة اعجبتكم وانتظرونى بدرس اخر جديد مفيد .