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

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

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

פעמים רבות נרצה שהתפריט הראשי של האתר יופיע על המסך לכל אורך הגלילה, צמוד לראש המסך. כשחושבים על זה מבחינת חוויית משתמש – יש בזה הרבה היגיון. מזל שקל מאוד לעשות את זה באתר שנבנה באלמנטור. כל מה שנחוץ זה רק להגדיר לאזור של ההאדר (כותרת עליונה) שיהיה דביק (מתקדם > אפקטי תנועה > דביק: עליון).

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

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

הדגמה מונפשת - האדר שמופיע כאשר גוללים כלפי מעלה

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

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

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

מגדירים האדר דביק שמופיע רק בתנועה כלפי מעלה

    1. בחרו את האזור באלמנטור אותו רוצים להדביק, והגדירו לו שיהיה דביק (מתקדם > אפקטי תנועה > דביק: עליון). הגדירו את קיזוז אפקט על 1 (חשוב!).
      פריט דביק באלמנטור
    2. הגדירו לאזור את הקלאס scroll-sticky (מתקדם > מתקדם > CSS Classes)
    3. הוסיפו את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):
      
      <script>
      jQuery(document).on('ready', function() {
          let lastScrollTop = 0;
          jQuery(window).scroll(function(event){
          let st = jQuery(this).scrollTop();
          let scrollSticky = jQuery('.scroll-sticky');
          if (st < lastScrollTop){
              scrollSticky.addClass('up-scroll');
          } else {
              scrollSticky.removeClass('up-scroll');
          }
          lastScrollTop = st;
          });
      })
      </script>
      
    4. הוסיפו את הצהרות ה-CSS האלו:
      .elementor-section-wrap .scroll-sticky.elementor-sticky--effects {
          -webkit-transition: .4s;
          transition: .4s;
          -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
      }
      
      .elementor-section-wrap .scroll-sticky.elementor-sticky--effects.up-scroll {
          -webkit-transform: translateY(0);
          transform: translateY(0);
      }
      

      כתבתי מאמר על איך להוסיף CSS לאתר שנבנה באלמנטור. יתכן שתמצאו אותו מועיל להבנת השלב הזה בתהליך.

    5. שמרו הכל וזהו – ההאדר יופיע רק בגלילה למעלה.

איך זה עובד?

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

כאשר מגדירים לאלמנט הדביק ערך של קיזוז אפקט, אלמנטור מוסיף לו את הקלאס elementor-sticky–effects כאשר הוא במצב דביק. אלמנטור מוסיף את הקלאס לצרכיו, אבל אנחנו יכולים להשתמש בו לצרכינו! ניתן להשתמש בו כדי לעצב ב-CSS את התפריט הדביק (להקטין לוגו, לשנות צבע רקע וכו'), או כמו במדריך זה, כדי להסתיר את ההאדר הדביק למרות שהוא מקובע.

הסקריפט שהוספנו בודק אם המשתמש גולל למטה או למעלה, ובהתאם מוסיף או מוריד את הקלאס scroll-up. לקלאס הזה הגדרנו חוק שמבטל את הסטת האלמנט למעלה, כך שהוא ישוב להופיע.

לקריאה נוספת

שיתוף   //

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

עוד באותו נושא
//

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

אלחנן, מנהל הסטודיו, יחזור אליך בשעות הקרובות וישמח לשוחח איתך.

דילוג לתוכן