אז position:sticky לא עובד לכם? נסו את הפתרון הבא!

אם אתם חווים בעיות עם התכונה position:sticky ב-CSS, כלומר אם התכונה אינה עובדת לכם, הסיבה היא בדרך כלל אחת מאלו.

1. התכונה לא נתמכת על ידי הדפדפן שלכם

לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה position:sticky נתמכת על ידי הדפדפן שלכם. תוכלו לבדוק את תמיכת הדפדפנים בתכונה בקישור הבא.

2. לא מוגדר Placement

כדי שאלמנטים המוגדרים כ sticky יעבדו כראוי הם חייבים לכלול את אחת מהתכונות הבאות (placement properties), ואלו התכונות top, bottom, right, left.

.sticky-element {
  position: sticky;
  top: 0;
}

3. לאחד מאלמנטי האב יש תכונת overflow

אם לאלמנט ה-sticky קיים אלמנט אב כלשהו המכיל את התכונה overflow:hidden, התכונה overflow:auto, או התכונה overflow:scroll, אז התכונה position:sticky לא תעבוד כראוי. אותו אב יוצר הקשר גלילה חדש, ולכן האלמנט ה-sticky נצמד בתוך אותו container במקום ל-viewport.

שתי סיבות נוספות: לאלמנט האב צריך להיות גובה מספיק כדי שהעמוד יגלול (אחרת אין למה להיצמד), ו-z-index נמוך או חסר יכול להשאיר את האלמנט ה-sticky מאחורי תוכן אחר.
הנה סניפט JavaScript שיאפשר לכם לגלות במהירות אם קיים אלמנט אב כזה לאלמנט שהגדרתם כ sticky המכיל את התכונה overflow. (מקור).

let parent = document.querySelector('.sticky-element').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

שאלות נפוצות

שאלות נפוצות על position: sticky שלא עובד:

סיכום

רוב המקרים של "sticky לא עובד" נובעים מ-overflow על אלמנט אב, מחוסר top/bottom/left/right, או מתמיכת דפדפן. תקנו את אלה קודם; הסניפט למעלה עוזר לאתר overflow. למידע נוסף על layout ו-positioning ראו את מדריך CSS למתחילים ואת המדריך לתכונת @property ב-CSS.