הצבת הסמן במיקום שלך – 'דביקה' נוחתת ב-WebKit

position: sticky היא דרך חדשה למיקום רכיבים והקונספט שלה דומה ל-position: fixed. ההבדל הוא שרכיב עם position: sticky מתנהג כמו position: relative בתוך ההורה שלו, עד שמגיעים לסף קיזוז נתון באזור התצוגה.

תרחישים לדוגמה

ניסוח לפי ההצעה המקורית של אדוארד או'קונור לגבי תכונה זו:

נעים להכיר: מיקום במיקום קבוע

הפעלת ההדגמה

על ידי הוספה פשוטה של position: sticky (עם קידומת של ספק), אנחנו יכולים לקבוע שרכיב מסוים יהיה position: relative עד שהמשתמש יגלול את הפריט (או את ההורה שלו) ל-15 פיקסלים מהקצה העליון:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

ב-top: 15px, הרכיב מתעדכן.

כדי להמחיש את התכונה הזו בצורה מעשית, יצרתי הדגמה ששומרת את כותרות הבלוג תוך כדי גלילה.

הגישה הישנה: אירועי גלילה

עד עכשיו, כדי ליצור את האפקט הדביק, אתרים הגדירו פונקציות event listener של scroll ב-JS. אנחנו למעשה משתמשים בשיטה הזו גם במדריכי html5rocks. במסכים שגודלם קטן מ-1,200 פיקסלים, סרגל הצד של תוכן העניינים שלנו משתנה ל-position: fixed לאחר גלילה מסוימת.

יש דוגמה לכותרת (המיושנת כיום) שנצמדת לחלק העליון של אזור התצוגה כשמשתמש גולל למטה ומתמקמת בחזרה כשהמשתמש גולל למעלה:

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

נסה את זה: http://output.jsbin.com/omanut/2/

קל ופשוט לעשות את זה, אבל המודל מתפרק במהירות אם רוצים לעשות את זה לכמה צומתי DOM. לדוגמה, כל כותרת <h1> של בלוג כשהמשתמש גולל.

למה JS לא אידאלי

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

עוד ועוד דפדפנים מיישמים גלילה עם האצת חומרה כדי לשפר את הביצועים. הבעיה היא שברכיבי handler של גלילה של JS פועלים, דפדפנים עשויים לעבור למצב איטי יותר (תוכנה). עכשיו אנחנו כבר לא פועלים ב-GPU. במקום זאת, אנחנו חוזרים על המעבד. והתוצאה? המשתמש קולט יותר בעיות בממשק (jank) כשהוא גולל את הדף.

לכן הגיוני שתכונה כזאת תהיה הצהרתית ב-CSS.

תמיכה

לצערנו, אין מפרט ספציפי לדגם הזה. היא הוצעה ב-www-style בחודש יוני, ורק נחתה ב-WebKit. המשמעות היא שאין תיעוד טוב להפנות אליו. עם זאת, חשוב לציין שלפי הבאג הזה, אם ציינת גם את left וגם את right, left יזכה. כמו כן, אם משתמשים ב-top וב-bottom בו-זמנית, הפונקציה top תנצח.

כרגע התמיכה היא ב-Chrome 23.0.1247.0+ (הגרסה הנוכחית של Canary) וב-WebKit בלילה.