موضوع و شرح جديد سوف يحتاجه كل من يعمل على تصميم قالب جديد أو يريد أن يجعل من مدونته أكثر أحترافيه وهذا الموضوع هو كيفية إخفاء القائمة العلوية عند تمرير الصفحة للأسفل و اظهارها عند التمرير الصفحة الى الأعلى بمعنى أنك عندما تقوم بتمرير الصفحة للأسفل بالماوس سوف تختفي القائمة العلوية و عندما تقوم بالعودة الى أعلى الصفحة سوف تبدأ القائمة العلوية بالظهور .
وهذا الميزه بالتأكيد شاهدها الكثيرون فى الكثير من المواقع أذا كانت تعرف شركة حسوب سوف تعرف هذه الطريقة لتثبيت القائمة بكل تأكيد لأن شركة حسوب فى أغلب المواقع التي تمتلكها تستخدم هذه الخاصية ولنذكر مثلا موقع خمسات للخدمات المصغرة بالتأكيد الكل سوف يعرفه وسوف تجد به هذه الطريقة وسوف تجد المزيد من إضافات بلوجر وشروحات على المدونة .
لذلك اليوم أحببت أن أشارك معكم هذه الطريقة لكيفية اخفاء القائمة العلوية عند تمرير الصفحة للأسفل و اظهارها عند التمرير الصفحة إلى الأعلى و حتى يتمكنك من الحصول عليه أى شخص من متابعى مدونة عالم المدون لنمر الان لمعاينة الإضافة وشرح التركيب وتحميل أكواد الإضافة .
معاينة وتحميل الكواد
وهذا الميزه بالتأكيد شاهدها الكثيرون فى الكثير من المواقع أذا كانت تعرف شركة حسوب سوف تعرف هذه الطريقة لتثبيت القائمة بكل تأكيد لأن شركة حسوب فى أغلب المواقع التي تمتلكها تستخدم هذه الخاصية ولنذكر مثلا موقع خمسات للخدمات المصغرة بالتأكيد الكل سوف يعرفه وسوف تجد به هذه الطريقة وسوف تجد المزيد من إضافات بلوجر وشروحات على المدونة .
لذلك اليوم أحببت أن أشارك معكم هذه الطريقة لكيفية اخفاء القائمة العلوية عند تمرير الصفحة للأسفل و اظهارها عند التمرير الصفحة إلى الأعلى و حتى يتمكنك من الحصول عليه أى شخص من متابعى مدونة عالم المدون لنمر الان لمعاينة الإضافة وشرح التركيب وتحميل أكواد الإضافة .
معاينة وتحميل الكواد
صورة من الإضافة
شرح التركيب
- سوف تقوم أول بالبحث عن هذا الوسم]]></b:skin>ثم تقوم بوضع الكود التالى هذا فوقه هو كود أستايل بسيط سوف تستخدمه فى هذه الطريقة .
.float_wrapper {
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all .3s ease-out;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 99;
width: 1150px;
margin: 0 auto;
}
.scroll{top:-90px}
.no-scroll{top:0;z-index:99}- الأن سوف تقوم بالبحث عن الوسم هذا/headثم تقوم بوضع ايضا الكود التالى فوقه وهذا هو كود سكربت أو يمكنك وضعه ايضا فوق هذا الوسم</body>فى مدونتك .
<script type='text/javascript'>
//<![CDATA[
$(function(){var e=$(document).scrollTop();var t=$(".float_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".float_wrapper").css("position","fixed")}else{$(".float_wrapper").css("position","fixed")}if(n>t){$(".float_wrapper").addClass("scroll")}else{$(".float_wrapper").removeClass("scroll")}if(n>e){$(".float_wrapper").removeClass("no-scroll")}else{$(".float_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
//]]>
</script>- الان مع أخر كود وهو كود بسيط جدا ويعتمل وسم وليس كود تابع معى فقط كيفية وضعه فى قالب مدونتك .
- سوف تقوم بالبحث عن القائمة العلوية فى قالب مدونتك يدويا بدون أبحث عن كود بها واذا كانت تعرف الكود الخاص بها أبحث عنه ، وبعد ذلك سوف تقوم بتحديد أذا كان الـ div الخاص بالقائمة وضع له id أو موضع له class .
- لأن اذا كانت القائمة العلوية لها class سوف تقوم بأتبع هذه الصورة لوضع الكود الأخير وهذا هو الكود الاخير
float_wrapper
- الكود المحدد بالأحمر هو كود الـ class الخاص بالقائمة والكود المحدد بالأخضر هو الكود الذى تم وضعه له
- أى بمعنى أذا كان كود القائمة العلوية وبهذا class هكذا
<div class='header-top'>- سوف تقوم بجعله هكذا مع وضع الوسم لهclass='float_wrapper'
<div class='float_wrapper header-top'>- أما اذا كان كود القائمة العلوية يحتوى على id سوف يتضع الكود الاخير أو الوسم الأخير بشكل اخر مثل المثال التالى فى هذه الصورة .
- الكود المحدد بالأحمر هو id القائمة العلوية والكود المحدد بالأخضر هو الكود الذى سوف تضيفه بجانب id القائمة العلوية أى بمعنى اذا كانت القائمة العلوية بهذا الشكل مع الـ id
<div class='id='header-top'>- سوف تقوم بتحويله الى هذا الكود بوضع الكود الصغير هذاclass='float_wrapper'بجانبه
<div class='float_wrapper' id='header-top'>- وبعد ذلك سوف تقوم بحفظ القالب ومبروك عليك الإضافة الجديده فى مدونتك .
هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة