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

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

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

ציטוטים מתוך ההצעה המקורית של Edward O'Connor לתכונה הזו:

חדש: מיקום קבוע

הדגמה של מודעות במיקום קבוע

LAUNCH DEMO

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

.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> של בלוג כשהמשתמש גולל.

למה JavaScript לא אידיאלי

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

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

לכן, הגיוני מאוד שהתכונה הזו תהיה מוצגת ב-CSS באופן דקלרטיבי.

תמיכה

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

בשלב הזה, התמיכה היא ב-Chrome מגרסה 23.0.1247.0 ואילך (גרסת Canary הנוכחית) וב-WebKit nightly.