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

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

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

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

2. לא מוגדר Placement

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

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

3. לאחד מה parent elements של האלמנט המוגדר כ sticky קיימת התכונה overflow

אם לאלמנט ה sticky קיים אלמנט אב כלשהו המכיל את התכונה overflow:hidden, התכונה overflow:auto, או התכונה overflow:scroll, אז התכונה position: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;
}

4. לאלמנט האב לא מוגדר גובה (height)

לאלמנט ה sticky לא יהיה מקום ״להדבק״ אליו אם התכונה height אינה מוגדרת לאלמנט האב.

עד כאן, מקווה שמצאתם את הפוסט מועיל.. בהצלחה!

רועי יוסף
רועי יוסף

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

0תגובות...

השאירו תגובה

 

Up!
לבלוג