לפני ארבע שנים, אריק בידלמן פרסם פוסט מגניב בבלוג על העובדה ש-position: sticky נחתה ב-WebKit, שבזמנו היה המנוע שהפעיל את Chrome (וכך גם הרבה דפדפנים אחרים, כולל Safari). שנה לאחר מכן, וביחד עם ההתלהבות של מפתחי האינטרנט הסרנו את position:sticky מ-Chrome כי "ההטמעה הנוכחית אינה משתלבת היטב עם מערכת הגלילה והאיחוד הקיימת".
תמיד רצינו להחזיר אותו ל-Chrome כפי שצוין על ידי הבאג, "ברגע שהשגנו את כללי הגלילה והחיבור, נחזור אל position:
sticky ונטמיע את התכונה באופן שמשתלב היטב עם שאר המנוע". אנחנו עובדים על המטא-באג שעוקב אחרי ההטמעה מאז 2013.
החדשות הטובות הן שהחל מגרסה 56 של Chrome (נכון לדצמבר 2016, גרסה יציבה בינואר 2017), position: sticky חוזר ל-Chrome.
מהו מיקום:דביק?
לקח לי זמן להגיע לכאן, אז למה אני מתלהב מזה?
position:sticky הוא מאפיין מיקום של CSS שמאפשר לתקן אלמנט לאזור התצוגה (כלומר, לעגן אותו לחלק העליון של המסך), אבל רק כשהורה שלו מופיע באזור התצוגה ונמצא בתוך ערך הסף. אם הוא לא קבוע לאזור התצוגה, האלמנט יפעל כאילו שהוא position: relative. זו תוספת נוחה ופשוטה מאוד לפלטפורמה, שמבטלים את הצורך להשתמש ב-JavaScript ב-handler של אירועים של onscroll רק כדי לנעול רכיב בחלק העליון של אזור התצוגה.
כך זה נראה בבלוג שלי. כך אני יכול להשאיר את הכותרת של הקטע הנוכחי בראש המסך בזמן שאתם קוראים מאמרים ארוכים ומאתגרים יותר :\
כדי להטמיע את התכונה הזו, צריך לציין שהמאפיין position צריך לכלול את הערך sticky ברכיב שרוצים שיהיה, er, תקוע.
בנוסף, אפשר גם להוסיף את היסט שבו צריך להיתקע.
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 (yay), ב-Firefox וב-Safari. הנה פרטים נוספים על position:sticky: