אלמנט סטיקי

אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין position: absolute לבין position: fixed.

מתי עושים שימוש באלמנט סטיקי?

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

איך יוצרים אלמנט סטיקי

HTML + CSS

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

בנוסף, נוסיף בCSS, סלקטור של האלמנט הזה + קלאס נוסף, למשל הקלאס fixed. ועל הסלקטור הזה ניתן את ההגדרות של position fixed, + הגדרות המיקום כמו top: 0px על מנת להעמיד אותו בצמוד לחלק העליון של המסך בגלילה.

JS

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

Var menuTop = jQuery(‘#menu’).offset().top

כעת נלכוד את אירוע הגלילה

jQuery(window).scroll(function(){
    if(jQuery(window).scrollTop() > menuTop)
        jQuery('#menu').addClass('fixed');
    else
        jQuery('#menu').removeClass(''fixed');
});

השורה הראשונה לוכדת את אירוע הגלילה.

השורה השניה משווה את המשתנה שלנו – menuTop מול מס' הפיקסלים שכבר נגללו – jQuery(window).scrollTop(). במידה ועברנו את אותה נקודה – נוסיף את הקלאס שהגדרנו בCSS, כדי שהתפריט יקבל את ההגדרות של position: fixed, וכל שאר הגדרות המיקום (top, left וכו'), ובמידה ולא עברנו את הנקודה – נסיר את הקלאס הזה.

אין שום בעיה לכתוב addClass כשכבר הקלאס קיים. הוא לא יתווסף פעם נוספת לאלמנט. כנ"ל לגבי removeClass – במידה והקלאס לא קיים – פשוט לא יקרה כלום.

הערה,

בדוגמה שלנו, הנקודה שהתפריט ננעץ בה היא הנקודה שהוא נוגע בחלון, לכן אנחנו משווים את הנקודה הזו עם מס' הפיקסלים שנגללו. במידה ונרצה שהוא יינעץ בנקודה אחרת, למשל תפריט צידי, שננעץ 10 פיקסלים מלמעלה, למשתנה menuTop  נוסיף עשרה פיקסלים (jQueyr(‘#menu’).offset().top + 10), וכן הלאה. העיקר שבמשתנה שמשווים מולו יהיה כבר את המספר הסופי שמולו רוצים להשוות.