إنشاء رأس لزجة إخفاء تلقائي مع Headroom.js

رؤوس إخفاء تلقائي تم شعبية ثابتة في تصميم المواقع الإلكترونية لفترة طويلة. تستخدم العديد من المدونات والمجلات عبر الإنترنت العنوان الملصق اجعل المستخدمين منشغلين و منحهم الوصول المباشر إلى الملاحة.

متوسطة لديها إعادة تعريف هذه الميزة مع المفهوم الأساسي الذي يخفي الملاحة في حين التمرير لأسفل لكن يظهر ذلك في حين التمرير لأعلى. أصبح هذا المفهوم الاتجاه بشعبية والآن يمكنك بسهولة تكرار ذلك استخدام Headroom.js.

Headroom.js هو مكتبة جافا سكريبت مجانية مع عدم وجود التبعيات أو ميزات API المفرطة. يمكنك فقط إضافته إلى HTML الخاص بك ، واستهداف رأس الصفحة ، والسماح لها بالعمل.

الإرتفاع ببساطة يضيف ويزيل بعض فئات CSS التي تحفز لكي إظهار / إخفاء الرأس باستخدام جافا سكريبت للكشف عن الحركة.

هل يمكن أن تجعل هذه الوظيفة بنفسك ولكن لماذا تهتم؟ اختبار الرأس و يدعم جميع المتصفحات الرئيسية. بل انه يلعب لطيفة مع مسج أو Zepto إذا كان لديك بالفعل مكتبة JS مثبتة على موقعك.

ستجد الكثير من عينات الكود في الريبو جيثب ولكن هنا أ مثال بسيط التي تستهدف #header جزء:

 var myElement = document.querySelector ("# header")؛ / / إنشاء كائن Headroom يمر في #header element var headroom = new Headroom (myElement)؛ // تهيئة مكتبة headroom.init () ؛ 

ال فيه() وظيفة لديها الكثير من الخيارات لتخصيص. يمكنك تخصيص مختلفة فئات العناصر, جنبا إلى جنب مع مختلف حدث الزناد رد الفعل حيث يمكنك تضمين الوظائف الخاصة بك. على سبيل المثال ، إذا كنت تريد أن يتلاشى العنصر بعد إلغاء تثبيته ، فستستخدم العنصر onUnpin أتصل مرة أخرى.

هذه الخيارات كلها المدرجة في صفحة البرنامج المساعد الرئيسي, لذلك تحقق من ذلك ونرى ما هو رأيك. لو تود ان ترى حيز الرأس في العمل إلقاء نظرة على القلم أدناه الذي يحتوي على استنساخ كامل للصفحة التجريبية الرئيسية.