גלילת אזורים דרך JetElements
משתמשים באלמנטים המגוונים והיצירתיים של JetElements אבל לא מצליחים להבין איך למנף אותם אל אותה נקודה שבה תצאו מרוצים? במידה ויצא לכם להשתמש בווידג'ט הזה לגלילה אנכית הבנתם שהשימוש בו לא מתאפשר לחלק מהמסך. לדוגמא, במידה ואני רוצה להשתמש בו רק ל3 אזורים עליוניים בדף – הווידג'ט לא מאפשר את העניין הזה.
לא תוסף ולא קומבינות – סניפט קצרצר שסוגר לכם את הפינה
לכן פניתי לChatGPT עם המשימה המורכבת ולאחר מספר ניסיונות (זה לא פשוט לנצח את הCSS של ג'ט כמו שזה נראה) – הפתרון לפניכם:
<script>
window.addEventListener('scroll', function() {
var element = document.getElementById('scrolling-element');
if (window.scrollY > window.innerHeight * 3) {
element.style.display = 'none';
} else {
element.style.display = 'flex';
}
});
</script>
לא אוהבים רק להעתיק ולהדביק? בואו נתעמק טיפה…
אז מה בעצם רואים פה? ChatGPT משתמש בJavaScript כדי לתפוס את הID של האלמנט. כן. אתם צריכים לתת ID לווידג'ט Scroll Navigation.
לאחר מכן, צריך לשים לב שאתם שמים את אותו ID בשורה 3 בקוד. בתוך הסוגריים אחרי getElementByID. שימו לב לא למחוק את הגרש הבודד בתוך הסוגריים!
נעבור לשורות 4-8: כאן יש לנו תנאי (if) שמתנה את הקוד בכך שאם הגלילה מתבצעת מעבר ל100VH (גובה המסך הנתון של המבקר. בין אם פלאפון, מחשב או טאבלט) כפול 3 פעמים – כי לי יש 3 קונטיינרים בווידג'ט הזה – סרגל הניווט של הווידג'ט בפינה יוסתר.
ככה פשוט. גללתם מעל ל300VH ? לא תראו יותר את הסרגל ניווט.
רוצים לראות את זה בלייב?
נכון לזמן כתיבת פוסט זה, הקוד תקף לדף הבית של אתר זה בלינק הזה.
איפה לשים את הקוד?
את הקוד שמים בעורך הקודים של אלמנטור. לא. אין צורך להתקין כל מיני תוספים שנותנים אפשרות להכניס סניפטים. זה כבר עבר מהעולם.
מסתבכים עדיין למצוא? פשוט תוסיפו את שורת הכתובת הבאה לסוף כתובת האתר בו אתם עובדים:
/wp-admin/edit.php?post_type=elementor_snippet
לאחר שנכנסתם לעורך הקודים של אלמנטור, פשוט תצרו קוד חדש ותגדירו שהוא יוצג בסוף תגית הBODY. זה תרגול טוב שקוד JS נמצא במיקום הזה. רוצים לדעת למה?
תרגישו חופשי לשאול ולהעיר ולהאיר אותי בתגובות. אני פה 🙂
נאור