جعل الهيدر عائم عند التمرير الصفحة الى الأسفل
بسم الله الرحمن الرحيم
جعل الهيدر عائم عند التمرير الصفحة الى الأسفل
الموضوع
السلام عليكم ورحمة الله وبركاته
مرحباً بكم زوار ومتابعين مدونة يوسف للمعلوميات
اليوم سوف نشرح موضوع جديد جميل وهو كيفيةجعل الهيدر عائم عند التمرير الصفحة الى الأسفل بحيث يمكن للزائر تصفح اقسام المدونة حتى وهو في اسفل صفحة المدونة بحيث لا يمل الزائر من التصفح في اقسام المدونة
الشرح
الخطوة الأولى : الذهاب الى لوحة التحكم الخاصة ببلوجر ومن ثم الى القالب بعد ذلك الى التحرير
وأبحث عن الكود التالي عبر الضغط على ctrl+f
</body>
وأضف الكود التالي فوقه
<script>
//<![CDATA[
iinfoyusif_makeSticky("idnav");
//http://www.infoyusif.com//
function infoyusif_makeSticky(elem) {
var infoyusif_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
infoyusif_sticky.parentNode.insertBefore(scrollee, infoyusif_sticky);
var width = infoyusif_sticky.offsetWidth;
var iniClass = infoyusif_sticky.className + ' infoyusif_sticky';
window.addEventListener('scroll', infoyusif_sticking, false);
function infoyusif_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
infoyusif_sticky.className = iniClass + ' infoyusif_sticking';
infoyusif_sticky.style.width = width + "px";
} else {
infoyusif_sticky.className = iniClass;
}}}
//http://www.infoyusif.com//
//]]>
</script>
<style>
.infoyusif_sticking {background:#2a3239 !important;position:fixed !important;
top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);
margin-top: 0; position:relative\9 !important;}
</style>
//<![CDATA[
iinfoyusif_makeSticky("idnav");
//http://www.infoyusif.com//
function infoyusif_makeSticky(elem) {
var infoyusif_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
infoyusif_sticky.parentNode.insertBefore(scrollee, infoyusif_sticky);
var width = infoyusif_sticky.offsetWidth;
var iniClass = infoyusif_sticky.className + ' infoyusif_sticky';
window.addEventListener('scroll', infoyusif_sticking, false);
function infoyusif_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
infoyusif_sticky.className = iniClass + ' infoyusif_sticking';
infoyusif_sticky.style.width = width + "px";
} else {
infoyusif_sticky.className = iniClass;
}}}
//http://www.infoyusif.com//
//]]>
</script>
<style>
.infoyusif_sticking {background:#2a3239 !important;position:fixed !important;
top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);
margin-top: 0; position:relative\9 !important;}
</style>
وبعد ذلك ابدل idnav ب معرف نافبر الخاص بك
لمعرفة المعرف الخاص بمدونتك
اذهب الى الصفحة الرئيسية للمدونة
اضغط على كلك يمين على الهيدر الخاص بمدونتك ومن ثم فحص العنصر
ابحث عن idnav سوف تجد بين النقطتين معرف الهيدر
مثلاً في مدونة يوسف للمعلوميات معرف الهيدر هو nav فإذاً سوف نبدل idvav بـ المعرف nav
الخطوى الثانية :نحفظ القالب ونشاهد الأضافة
النهاية
