עזרה ביצירת דביק

[1ֹ_RACHEL]

שלום,
יש לי תפריט די גבוה (מורכב מכמה תפריטים וכפתורים שונים)
אני רוצה שבגלילה חלק ישאר sticky וחלק יגלל רגיל

שאני מגדירה לאזור העליון שבתפריט שיגלל רגיל, ולאזור התחתון שיהיה sticky - זה לא עוזר ולא עובד
איך נכון לבצע כזה דבר?
יש אפשרות רק עם CSS?
תודה רבה!

 

[s976]

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

 

[1ֹ_RACHEL]

כן, זה מה שאני רוצה.
אין בעיה,
אז גם בעזרת JS, מה שיש
אשמח לשמוע איך

עכשיו אני שמה לב לכותרת העילגת שלי, איך מתקנים נושא?

 

[Yehuda Kremer]

עשיתי עם js
https://codepen.io/yehudak/pen/mdmBgBr
מה דעתך?

 

[s976]

עשיתי עם js
https://codepen.io/yehudak/pen/mdmBgBr
מה דעתך?

מעולה!
רוצה הערות?

 

[Yehuda Kremer]

תודה

אשמח לקבל הערות

 

[s976]

אתה מפעיל את הפונקציות האלה כל פעם שיש אירוע גלילה. זה מיותר. אפשר ״לתפוס״ את האלמנט מחוץ לפונצקיה הזו.

 

[s976]

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

 

[אלעזר 1]

לתת לאיזור המתאים:

position: sticky;
top: 0;

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

https://codepen.io/witty_code/pen/JjNOqmE

 

[Yehuda Kremer]

לתת לאיזור המתאים:

position: sticky;
top: 0;

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

https://codepen.io/witty_code/pen/JjNOqmE

נפלא! לא צריך JS, יישר כוח!

לגבי "אלמנט מקונן", אני רואה ש"sticky" עובד רק אם הוא בן של אלמנט עם יכולת גלילה כמו שכתוב כאן:

לכן טוב עשית שהוצאת את התפריט התחתון מהאלמנט "header" שאין לו גלילה, לאלמנט body שנגלל.

 

[1ֹ_RACHEL]

לתת לאיזור המתאים:

position: sticky;
top: 0;

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

https://codepen.io/witty_code/pen/JjNOqmE

איזה פשוט
תודה רבה!!!!!

ותודה לכולם על העזרה!