הדר שנשאר צמוד לראש המסך בזמן הגלילה, ומקבל צל עדין ברגע שהתוכן מתחיל לזוז מתחתיו, הוא אחד הפרטים הקטנים בחוויית המשתמש שהופכים אתר למקצועי. הגולשים תמיד רואים את התפריט ואת כפתור הפנייה, והצל מפריד בין ההדר לתוכן בלי להעמיס. במדריך הזה אני מראה איך בונים סטיקי הדר באלמנטור עם צל בגלילה, צעד אחר צעד, כמו שאני עושה באתרים של לקוחות.
יש כאן שתי דרכים: עם Elementor Pro, בעזרת Motion Effects, ובלי Pro, עם כמה שורות CSS ו-JavaScript. בסוף ריכזתי את הבעיות הנפוצות ואיך פותרים אותן.
שלב 1: תבנית הדר ב-Theme Builder
באלמנטור פרו ההדר נבנה כתבנית נפרדת: בלוח הבקרה נכנסים ל-Templates ואז Theme Builder, יוצרים Header חדש, ובסיום מגדירים תנאי תצוגה (בדרך כלל Entire Site).
שני דברים שאני מגדיר כבר בשלב הזה:
- קונטיינר חיצוני אחד שעוטף את כל ההדר (לוגו, תפריט, כפתור). את הסטיקי מגדירים עליו, ולא על קונטיינר פנימי.
- תגית HTML מסוג header לקונטיינר החיצוני (בלשונית Layout של הקונטיינר, תחת Additional Settings). זה עוזר לנגישות ולמבנה סמנטי של העמוד.
לתמונת הלוגו תנו CSS Class בשם header-logo (בלשונית Advanced). הוא ישמש בהמשך כדי להקטין את הלוגו בגלילה.
שלב 2: Motion Effects והגדרת Sticky
בוחרים את הקונטיינר החיצוני, עוברים ללשונית Advanced ופותחים את Motion Effects. שם מגדירים:
- Sticky: Top.
- Sticky On: באילו מכשירים ההדר יהיה צמוד. ברירת המחדל היא מחשב, טאבלט ומובייל. על מובייל ארחיב בהמשך.
- Offset: המרחק מראש המסך כשההדר צמוד. ברוב המקרים 0.
- Effects Offset: כמה פיקסלים הגולש צריך לגלול לפני שהאפקטים מופעלים. אני מתחיל מערך קרוב לגובה ההדר, בערך 80 עד 100.
כאן נמצא כל הסוד: אחרי שהגולש עובר את ה-Effects Offset, אלמנטור מוסיף לקונטיינר את הקלאס elementor-sticky--effects. כל עוד הגולש למעלה, הקלאס לא קיים. כלומר, כל עיצוב שתכתבו עבור הקלאס הזה יופיע רק בזמן גלילה.
שלב 3: קוד CSS לצל, רקע והקטנת ההדר
באותו קונטיינר, תחת Advanced ואז Custom CSS, מדביקים את הקוד הבא. המילה selector היא קיצור של אלמנטור לאלמנט הנוכחי, כך שהקוד משפיע רק על ההדר הזה:
selector {
transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
selector.elementor-sticky--effects {
background-color: #ffffff;
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
padding-top: 8px;
padding-bottom: 8px;
}
selector .header-logo img {
transition: max-width .3s ease;
}
selector.elementor-sticky--effects .header-logo img {
max-width: 120px;
}מה הקוד עושה:
- צל: ה-box-shadow מופיע רק כשהקלאס קיים. אם אתם רוצים צל בולט יותר, הגדילו את הערך 0.1 ל-0.15 או 0.2.
- רקע: אם ההדר המקורי שקוף, כאן הוא מקבל רקע לבן בגלילה.
- הקטנה: ה-padding יורד ל-8 פיקסלים והלוגו מצטמצם ל-120 פיקסלים, כך שההדר תופס פחות מקום בזמן קריאה.
- מעבר חלק: ה-transition מוגדר על המצב הרגיל, ולכן השינוי חלק גם בירידה וגם בחזרה למעלה.
שימו לב שה-transition מפרט מאפיינים ספציפיים ולא all. זה חוסך עבודה מהדפדפן ומונע אנימציות לא צפויות.
הסרטון המקורי שלי עם ההדגמה עדיין רלוונטי: צפו בהדגמה ביוטיוב.
איך עושים סטיקי הדר באלמנטור בלי Pro
בלי Elementor Pro אין Theme Builder ואין Motion Effects, וההדר בדרך כלל מגיע מהתבנית. קודם כל בדקו את הגדרות התבנית: לרוב התבניות יש אפשרות סטיקי מובנית (ב-WoodMart, למשל, זה מוגדר בבונה ההדר של התבנית). אם אין, תנו לאלמנט ההדר קלאס rs-header והוסיפו את ה-CSS הבא (בתבניות שתומכות בזה, דרך עיצוב, התאמה אישית ואז CSS נוסף):
.rs-header {
position: sticky;
top: 0;
z-index: 100;
background-color: #ffffff;
transition: box-shadow .3s ease;
}
.rs-header.is-scrolled {
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}position: sticky עושה את הצמדת ההדר בלי שום JavaScript. אם אתם מחוברים לאתר, פס הניהול של וורדפרס עלול לכסות את ההדר. הגולשים לא רואים אותו, אבל לנוחות שלכם אפשר להוסיף .admin-bar .rs-header { top: 32px; } (במובייל גובה הפס שונה). בשביל הצל צריך לדעת מתי הגולש התחיל לגלול, ולשם כך הסקריפט הבא מוסיף את הקלאס is-scrolled. אפשר להוסיף אותו לפוטר האתר דרך תוסף להוספת קוד, או בשדה הסקריפטים של התבנית אם יש כזה:
<script>
(function () {
var header = document.querySelector('.rs-header');
if (!header || !('IntersectionObserver' in window)) return;
// An invisible 80px marker at the top of the page.
var marker = document.createElement('div');
marker.setAttribute('aria-hidden', 'true');
marker.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:80px;pointer-events:none;';
document.body.prepend(marker);
// Once the marker leaves the screen, the header gets the class.
new IntersectionObserver(function (entries) {
header.classList.toggle('is-scrolled', !entries[0].isIntersecting);
}).observe(marker);
})();
</script>בגרסה הזו אני לא מקטין את גובה ההדר. עם position: sticky ההדר נשאר חלק מזרימת העמוד, ושינוי בגובה שלו מזיז את כל התוכן מתחתיו. אם בכל זאת רוצים להקטין, הקטינו רק את הלוגו בעזרת transform: scale(), שלא משפיע על הפריסה.
ביצועים: למה IntersectionObserver ולא האזנה לגלילה
הרבה מדריכים מציעים לבדוק את window.scrollY בכל אירוע גלילה. אירוע הגלילה יכול לרוץ עשרות פעמים בשנייה, וקוד כבד שרץ בכל פעם מאט את הגלילה ופוגע במדד INP. IntersectionObserver מפעיל את הקוד רק ברגע שהסימון נכנס למסך או יוצא ממנו, ולא בכל פיקסל של גלילה.
אם אתם כבר עובדים עם האזנה לגלילה, הוסיפו לה { passive: true }, ועדכנו קלאס בלבד בתוך requestAnimationFrame, בלי למדוד אלמנטים בכל אירוע. עוד על מה שמאט אתרי אלמנטור כתבתי במדריך לשיפור מהירות אתר וורדפרס.
התאמה למובייל
- גובה: במובייל כל פיקסל של הדר צמוד בא על חשבון התוכן. אני שומר על הדר מובייל של 60 עד 70 פיקסלים לכל היותר.
- לבחור מכשירים: באתרי תוכן ארוכים לפעמים עדיף להסיר את המובייל מ-Sticky On, או להשאיר צמוד רק פס קטן עם כפתור התקשרות.
- תפריט המבורגר: בדקו שהתפריט הנפתח עובד גם כשההדר צמוד, ושהוא לא נחתך או נפתח מתחת לתוכן.
על עיקרון המובייל קודם הרחבתי במאמר על עיצוב אתר רספונסיבי.
בעיות נפוצות ואיך פותרים אותן
ההדר נעלם מתחת לתוכן
זו בעיית z-index. תנו לקונטיינר של ההדר z-index גבוה מהתוכן (100 מספיק ברוב האתרים), אבל נמוך מפופאפים ומתפריט המובייל.
ההדר קופץ בתחילת הגלילה
ברוב המקרים מדובר ב-margin על ההדר או באלמנט שמשנה גובה בבת אחת. השתמשו ב-padding במקום margin, ותנו Effects Offset שגדול מאפס, כך שהשינוי מתחיל רק אחרי שההדר כבר צמוד.
position: sticky לא עובד
בדקו שאין לאחד מהאלמנטים שעוטפים את ההדר overflow: hidden, ושהסטיקי מוגדר על העוטף החיצוני. אלמנט סטיקי נצמד רק בגבולות האלמנט שמכיל אותו.
פס עליון שצריך להיעלם בגלילה
אם יש מעל ההדר פס עם טלפון או הודעת משלוח, אין סיבה שיישאר צמוד. בנו אותו כקונטיינר נפרד מעל הקונטיינר של ההדר, והגדירו Sticky רק על ההדר עצמו. הפס ייגלל החוצה, וההדר ייצמד לראש המסך.
קישורי עוגן נעצרים מתחת להדר
כשלוחצים על קישור לעוגן בעמוד (למשל "לטופס"), הכותרת של הסקשן מסתתרת מאחורי ההדר הצמוד. בקישורי עוגן רגילים זה נפתר עם שורת CSS אחת: html { scroll-padding-top: 90px; }, בגובה ההדר בגלילה.
הדר שקוף שלא קריא בגלילה
בהדר שקוף מעל תמונת hero, הלוגו והתפריט בדרך כלל לבנים. בגלילה, כשהרקע הופך ללבן, צריך להחליף גם את צבע התפריט (ולפעמים את הלוגו) בתוך selector.elementor-sticky--effects. כדי שההדר יעלה מעל ה-hero, הדרך הפשוטה היא margin עליון שלילי לסקשן הראשון, בגובה ההדר.
שאלות נפוצות
האם אפשר ליצור סטיקי הדר באלמנטור בגרסה החינמית?
לא דרך Motion Effects, שהיא יכולת של Pro. אבל אפשר עם אפשרות הסטיקי של התבנית, או עם ה-CSS וה-JavaScript שבמדריך.
הקלאס elementor-sticky–effects לא מופיע. מה לבדוק?
ודאו שהגדרת Sticky היא Top, שהמכשיר שבו אתם בודקים מסומן ב-Sticky On, ושגללתם יותר מערך ה-Effects Offset. בדקו בעמוד החי ולא רק בעורך, ונקו את הקאש של תוסף האופטימיזציה.
האם סטיקי הדר פוגע במהירות?
לא, כשהוא בנוי נכון. CSS עם transition על מאפיינים ספציפיים ו-IntersectionObserver כמעט לא עולים כלום בביצועים.
רוצים הדר שעובד בדיוק כמו שצריך?
אם ההדר באתר שלכם קופץ, נעלם במובייל או פשוט לא נראה כמו שדמיינתם, השאירו פרטים ואבדוק מה קורה. עוד טיפים על בנייה נכונה תמצאו במדריך לבניית אתרים באלמנטור.