יצירת כותרת מסתירה אוטומטית עם headroom.js

הסתרה אוטומטית של כותרות היו פופולריים בהתמדה בעיצוב אתרים די הרבה זמן. בלוגים רבים ומגזינים מקוונים להשתמש כותרת דביק ל לשמור על המשתמשים עוסקים ו לתת להם גישה ישירה לניווט.

בינונית יש הגדר מחדש את התכונה הזו עם מושג בסיסי זה מסתיר את הניווט בזמן גלילה למטה אבל מראה את זה בזמן גלילה למעלה. מושג זה הפך להיות מגמה פופולרית ועכשיו אתה יכול בקלות לשכפל אותו באמצעות Headroom.js.

Headroom.js הוא חינם וניל ללא תלות או תכונות API מופרזות. אתה פשוט להוסיף אותו HTML, למקד את כותרת הדף, ולתת לו לרוץ.

ראש פשוט מוסיף ומסיר כיתות CSS מסוימים הנפשת כדי הצג / הסתר את הכותרת באמצעות JavaScript כדי לזהות את ההצעה.

אתה יכול לעשות את הפונקציונליות הזו בעצמך אבל למה לטרוח? הראש נבדק תומך בכל הדפדפנים העיקריים. זה אפילו משחק נחמד עם jQuery או Zepto אם כבר יש לך ספריית JS מותקנת באתר שלך.

אתה תמצא שפע של דוגמאות קוד ב ריטו GitHub אבל הנה דוגמה פשוטה כי מטרות #header באל you

 var myElement = document.querySelector ("# header"); / / ליצור אובייקט headroom חולף אלמנט #header var headroom = חדש headroom (myElement); // אתחול הספרייה headroom.init (); 

ה init () פונקציה יש שפע של אפשרויות להתאמה אישית. ניתן להתאים אישית את שונות כיתות אלמנט, יחד עם שונה אירוע callbacks אירוע שבו אתה יכול להטביע את הפונקציות שלך. לדוגמה, אם אתה רוצה שהאלמנט יתפוגג לאחר ביטול ההצמדה, תשתמש בו onUnpin התקשר חזרה.

אפשרויות אלה הן כולן המפורטים בדף התוסף הראשי, אז לבדוק את זה ולראות מה אתה חושב. אם אתה רוצה לראות האולם בפעולה יש להסתכל על העט למטה המכיל שיבוט מלא של דף ההדגמה הראשי.