לפני ארבע שנים, אריק בודלמן פרסם פוסט בבלוג על כך ש-position: sticky הגיע ל-WebKit, שהיה בזמנו המנוע שהניע את Chrome (וגם דפדפנים רבים אחרים, כולל Safari). שנה לאחר מכן, למרבה המבוכה של מפתחי האינטרנט, הסרנו את position:sticky מ-Chrome כי "ההטמעה הנוכחית לא תוכננה בצורה שמאפשרת שילוב טוב עם מערכת הגלילה והקומפוזיציה הקיימת".
תמיד רצינו להחזיר אותה ל-Chrome, כפי שצוין בבאג: "אחרי שנשלים את העבודה על הגלילה והקומפוזיציה, נוכל לחזור ל-position:
sticky ולהטמיע את התכונה בצורה שתשתלב היטב עם שאר המנוע". באג המטא למעקב אחרי ההטמעה טופל מאז 2013.
החדשות הטובות הן שהחל מגרסה 56 של Chrome (גרסת בטא נכון לדצמבר 2016, גרסה יציבה נכון לינואר 2017) position: sticky חוזר ל-Chrome.
מהו position:sticky?
עבר קצת זמן עד שהגענו לשלב הזה, אז למה אני מתרגש?
position:sticky הוא מאפיין מיקום של CSS שמאפשר לכם לתקן רכיב באזור התצוגה (כלומר, לאחד אותו לחלק העליון של המסך), אבל רק אם הרכיב ההורה שלו גלוי באזור התצוגה והוא נמצא בתוך ערך הסף. אם האלמנט לא מוגדר לאזור התצוגה, הוא יפעל כאילו הוא position: relative. זוהי תוספת נעימה ופשוטה לפלטפורמה שמבטלת את הצורך להשתמש ב-JavaScript בטיפול באירוע onscroll רק כדי לנעול רכיב בחלק העליון של אזור התצוגה.
כך זה נראה בבלוג שלי. כך הכותרת של הקטע הנוכחי תישאר בחלק העליון של המסך בזמן שתקראו את המאמרים הארוכים והמאתגרים שלי :\
כדי להטמיע את התכונה הזו, צריך לציין שהערך של המאפיין position צריך להיות sticky ברכיב שרוצים להקפיא.
בנוסף, אפשר גם להוסיף את ההיסט במקום שבו צריך להצמיד אותו.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
הדוגמה הקודמת תציב את הרכיב <h3> במרחק 10 פיקסלים מחלקו העליון של אזור התצוגה. כדי להציב אותו ישירות בחלק העליון של אזור התצוגה, צריך להגדיר את המאפיין top כ-top: 0px.
התמיכה בתכונה הזו רחבה למדי. הוא זמין ב-Chrome (יופי), ב-Firefox וב-Safari. לפניכם פרטים נוספים על position:sticky: