עיצוב Sticky Headers ללא JavaScript: המדריך ל-CSS Scroll-State Queries

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

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

הבעיה: כשה-Scroll Listener הורג את הביצועים

במשך שנים, הדרך הסטנדרטית לפתור את הבעיה הזו הייתה לרוץ אל JavaScript.

הפיתרון המהיר של יובל היה להוסיף מאזין לאירוע גלילה: window.addEventListener('scroll'). כל פיקסל שהמשתמש גלל, הדפדפן הריץ פונקציה שבדקה את מכלול המרחקים במסך והוסיפה מחלקת CSS בשם is-sticky.

התוצאה? הגלילה במכשירים ניידים התחילה לגמגם. הדפדפן נדרש לחשב את חישובי ה-Layout מחדש עשרות פעמים בשנייה.

הניסיון הראשון שנכשל: Intersection Observer

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

הוא שתל אלמנט עזר בלתי נראה בראש הדף, מעל התפריט. ברגע שאותו אלמנט יצא מהמסך, ה-Observer הדליק את הסטייל של ה-Sticky.

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

הגדרה · Container Scroll-State Queries

תכונה ב-CSS המאפשרת לאלמנט לתשאל את מצב הגלילה של אלמנט האב שלו (או של עצמו) — האם הוא כרגע נדבק (stuck), גלול (scrolled), או נמצא בקצה הגלילה.

הפתרון של 2026: Container Scroll-State Queries ב-CSS טהור

בשנה הזו, הסטנדרט השתנה לחלוטין. במקום להיאבק ב-JavaScript, אנחנו מגדירים את התפריט כ-Container מסוג scroll-state.

בואו נראה איך הקוד נראה. ראשית, מגדירים את ה-Container:

.header-wrapper {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

ואז, בעזרת שאילתת קונטיינר פשוטה, אנחנו בודקים אם האלמנט במצב stuck:

@container scroll-state(stuck: top) {
  .header-content {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1rem;
  }
}

אין שורת JavaScript אחת. אין מאזינים. אין אלמנטים מיותרים ב-HTML.

התוצאה: 0 שורות JS, ביצועים מושלמים ב-60FPS

כשיובל החליף את הקוד בטכניקה הזו, התוצאה הייתה מיידית.

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

זה לא עובד רק על Sticky Headers. אפשר להשתמש בזה גם כדי:

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

סיכום: הלקח של 2026

שנים התרגזנו שאי אפשר לשאול ב-CSS "האם האלמנט נדבק כרגע?". נאלצנו לכתוב פתרונות מורכבים ב-JS בשביל הפעולה הבסיסית ביותר בממשק.

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

💡

בניית ממשק מהיר ב-2026 היא לא רק אופטימיזציה של קוד — היא בחירה בכלים הנכונים שמורידים את העומס מהדפדפן.