جعل عنصر ثابتًا (Sticky) في مدونة بلوجر أو أي موقع ويب
هذا الكود يُستخدم لجعل عنصر معين في مدونة بلوجر (أو أي موقع ويب) ثابتًا (Sticky) أثناء التمرير (Scroll)، أي أن العنصر يبقى في مكانه حتى عندما يقوم المستخدم بالتمرير لأسفل أو لأعلى الصفحة. هذا مفيد لعناصر مثل الأزرار، القوائم الجانبية، أو أي عنصر تريد أن يظل مرئيًا طوال الوقت.
شرح الكود بالتفصيل:
الجزء الأول: CSS
.sticky {
position: fixed; /* يجعل العنصر ثابتًا في مكانه */
top: 10px; /* المسافة من أعلى الصفحة */
z-index: 100; /* يحدد مستوى ترتيب العنصر فوق العناصر الأخرى */
}position: fixed;: يجعل العنصر ثابتًا في مكانه حتى عند التمرير.top: 10px;: يحدد المسافة من أعلى الصفحة حيث سيتم تثبيت العنصر. يمكن تغيير هذه القيمة حسب الحاجة.z-index: 100;: يضمن أن العنصر يظهر فوق العناصر الأخرى في الصفحة. كلما زاد الرقم، زادت أولوية العنصر في الظهور فوق العناصر الأخرى.
الجزء الثاني: JavaScript (jQuery)
$(document).ready(function() {
var stickyWidgetTop = $('add id or class').offset().top; // يحسب المسافة من أعلى الصفحة إلى العنصر
var stickyWidget = function() {
var scrollTop = $(window).scrollTop(); // يحسب مقدار التمرير الحالي
if (scrollTop > stickyWidgetTop) { // إذا تجاوز التمرير موقع العنصر
$('add id or class').addClass('sticky'); // يضيف كلاس "sticky" للعنصر
} else {
$('add id or class').removeClass('sticky'); // يزيل كلاس "sticky" من العنصر
}
};
stickyWidget(); // تنفيذ الدالة عند تحميل الصفحة
$(window).scroll(function() { // تنفيذ الدالة عند التمرير
stickyWidget();
});
});
تفصيل الكود JavaScript:
$(document).ready(function() {...});:- يتم تنفيذ الكود الموجود داخل هذه الدالة بمجرد أن يتم تحميل الصفحة بالكامل.
var stickyWidgetTop = $('add id or class').offset().top;:- يحسب المسافة من أعلى الصفحة إلى العنصر الذي تريد تثبيته.
$('add id or class'): هنا يجب استبدال'add id or class'بـ ID أو Class الخاص بالعنصر الذي تريد تثبيته. مثلاً:- إذا كان العنصر له ID مثل
#myWidget، استبدل الكود بـ$('#myWidget'). - إذا كان العنصر له Class مثل
.myWidget، استبدل الكود بـ$('.myWidget').
- إذا كان العنصر له ID مثل
var stickyWidget = function() {...};:- دالة تقوم بفحص ما إذا كان المستخدم قد قام بالتمرير إلى ما بعد موقع العنصر أم لا.
var scrollTop = $(window).scrollTop();:- يحسب مقدار التمرير الحالي من أعلى الصفحة.
if (scrollTop > stickyWidgetTop) {...}:- إذا كان مقدار التمرير الحالي أكبر من المسافة من أعلى الصفحة إلى العنصر، يتم إضافة الكلاس
stickyإلى العنصر. - إذا كان مقدار التمرير أقل، يتم إزالة الكلاس
stickyمن العنصر.
- إذا كان مقدار التمرير الحالي أكبر من المسافة من أعلى الصفحة إلى العنصر، يتم إضافة الكلاس
$(window).scroll(function() {...});:- يتم تنفيذ الدالة
stickyWidgetكلما قام المستخدم بالتمرير في الصفحة.
- يتم تنفيذ الدالة
كيفية استخدام الكود:
- تحديد العنصر المراد تثبيته:
- قم بإضافة ID أو Class للعنصر الذي تريد تثبيته. مثلاً:
<div id="myWidget">هذا العنصر سيكون ثابتًا</div>
- قم بإضافة ID أو Class للعنصر الذي تريد تثبيته. مثلاً:
- تعديل الكود JavaScript:
- استبدل
'add id or class'بـ#myWidgetإذا كنت تستخدم ID، أو.myWidgetإذا كنت تستخدم Class.
- استبدل
- إضافة الكود إلى مدونة بلوجر:
- أضف الجزء الخاص بـ CSS داخل
<style>...</style>في قسم<head>. - أضف الجزء الخاص بـ JavaScript داخل
<script>...</script>قبل إغلاق</body>.
- أضف الجزء الخاص بـ CSS داخل
مثال عملي:
لنفترض أن لديك عنصرًا به ID #sticky-button، وتريد تثبيته عند التمرير. سيكون الكود كالتالي:
<style>
.sticky {
position: fixed;
top: 10px;
z-index: 100;
}
</style>
<script>
$(document).ready(function() {
var stickyWidgetTop = $('#sticky-button').offset().top;
var stickyWidget = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#sticky-button').addClass('sticky');
} else {
$('#sticky-button').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
ملاحظات مهمة:
- تأكد من أن مكتبة jQuery مضمنة في مدونتك. يمكنك إضافتها باستخدام:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> - إذا كنت تستخدم عناصر متعددة وتريد تثبيتها، يمكنك استخدام Class بدلاً من ID.
بهذا الكود، يمكنك جعل أي عنصر في مدونتك ثابتًا عند التمرير، مما يحسن من تجربة المستخدم ويجعل العناصر المهمة دائمًا في متناول اليد.
