hide-show-header-with-headroom-js-Cover

تتيح لك مكتبة Headroom.js العديد من الخصائص الّتي تسهل على زوارك تصفّح موقعك. فإنها تقوم بإظهار وإخفاء ترأيسة الموقع “Header” مع تصفح الزائر صعوداً أو نزولاً. فلنفترض أنك تريد أن تخفي الهيدر مع نزول الزائر من أعلى الصفحة، عندها تقوم المكتبة بإضافة class على الهيدر باسم “headroom-unpinned” وبإمكانك تخصيص هذه الكلاس ليقوم بإخفاء الهيدر باستخدام CSS. وفي حالة صعود الزائر للأعلى قليلاً يظهر الهيدر بشكل مباشر، وتقوم المكتبة بإضافة class على الهيدر باسم “headroom-pinned”. هذه الآلية تعتبر فعّالة في المواقع ذات الصفحة الواحدة، ليكون الهيدر على مقربة من الزائر لتسهيل الوصول إلى جميع عناصر الصفحة.


مكتبة Headroom.js مستقله بذاتها ولا تتطلب أي تبعيّات. ويمكن استخدامها كذلك مع مكتبة jQuery و Zepto و AngularJS. وبإمكانك تخصيص جميع خياراتها ومسميات class من خلال JavaScript.


تحميل مكتبة Headroom.js


مثال – demo

بإمكانك رؤية مثال حي من تصميم فريق ekleel على موقع المصورة ريما عبدالله. أو من خلال موقع مكتبة Headroom.js.


كيف تعمل؟

بكل بساطة تقوم المكتبة بإضافة وحذف كلاسات CSS من الهيدر. هذه الكلاسات هي التي تقوم بإظهار وإخفاء الهيدر حسب تخصيصك لها. كالآتي:

<!-- التنسيق الأساسي -->
<header class="headroom">

<!-- التصفح للأسفل -->
<header class="headroom headroom--unpinned">

<!-- التصفح للأعلي -->
<header class="headroom headroom--pinned">

بهذه الطريقة يمكنك التحكم بشكل كامل بطريقة إظهار وإخفاء الهيدر. مثال على تنسيق بسيط ومختصر:

.headroom--pinned {
display: block;
}
.headroom--unpinned {
display: none;
}

مثال أكثر جمالاً باستخدام CSS Transitions:

.headroom {
 transition: transform 200ms linear;
}
.headroom--pinned {
 transform: translateY(0%);
}
.headroom--unpinned {
 transform: translateY(-100%);
}

كيف تستخدم؟

بامكانك تفعيل واستخدام مكتبة Headroomjs بكل بساطة باستخدام Javascript مباشرة، كذلك تتيح لك خيار اسخدامها بـ jQuery و Zepto و AngularJS.

بواسطة JavaScript

أضف مكتبة Headroomjs إلى موقعك ثم قم بإضافة الكود التالي:

// تحديد العنصر
var myElement = document.querySelector("header");
var headroom = new Headroom(myElement);

// التفعيل initialise
headroom.init();
بواسطة jQuery

أضف مكتبة Headroomjs ومكتبة jQuery.headroom.js إلى موقعك ثم قم بإضافة الكود التالي:

$("#header").headroom();

الخيارات

بإمكانك تخصيص خيارات مكتبة Headroom.js وتغيير مسميات كلاسات CSS لتناسب موقعك. وكذلك خيارات تجاوب التصفح، فيمكنك تأخير إخفاء الهيدر أو إظهاره للزائر، من خلال هذه الخيارات في JavaScript:

{
 // vertical offset in px before element is first unpinned
 offset : 0,

 // scroll tolerance in px before state changes
 tolerance : 0,

 // or you can specify tolerance individually for up/down scroll
 tolerance : {
 up : 5,
 down : 0
 },

 // css classes to apply
 classes : {
 // when element is initialised
 initial : "headroom",
 // when scrolling up
 pinned : "headroom--pinned",
 // when scrolling down
 unpinned : "headroom--unpinned",
 // when above offset
 top : "headroom--top",
 // when below offset
 notTop : "headroom--not-top"
 },

 // element to listen to scroll events on, defaults to `window`
 scroller : someElement,

 // callback when pinned, `this` is headroom object
 onPin : function() {},

 // callback when unpinned, `this` is headroom object
 onUnpin : function() {},

 // callback when above offset, `this` is headroom object
 onTop : function() {},

 // callback when below offset, `this` is headroom object
 onNotTop : function() {},
}

موقع مكتبة Headroom.js


هذه نبذة بسيطة ومختصرة عن المكتبة وشرح لابسط خياراتها. يمكنك تخصيصها بالطريقة المناسبة لموقعك وبالأسلوب الخاص بك.

شاركنا رأيك وتجربتك مع مكتبة Headroom.js في التعليقات 😍.

الأحد، 3 مايو 2015 - 1:21 م

تابع التصفح!
« | »

شاركنا أفكارك