15 תוספים jQuery לעשות חכם רכיבים דביקים

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

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

1. נקודות ציון

נקודות ציון היא ספריה כדי לבצע פונקציה המבוססת על מיקום האלמנט ב- viewport. זה מגיע עם פונקציה קיצור עושה את זה אלמנט “דביק”. ניתן להתאים אישית את כיוון הגלילה - למעלה, מטה, ואפילו ימין ו שמאלה - אשר אלמנט צריך להישאר בתוך ויפורט.

• תלות: ללא / jQuery (אופציונלי)
• רישיוןרישיון MIT

2. ערכת דביק

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

• תלות: jQuery
• רישיון: WTFPL

3. StickyJS

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

• תלות: jQuery
• רישיוןרישיון MIT

4. כותרת

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

• תלות: ללא / jQuery (אופציונלי) / זוויתי (אופציונלי)
• רישיוןרישיון MIT

5. MakefixedJS

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

• תלות: jQuery
• רישיון: GPL

6. MidnightJS

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

• תלות: jQuery
• רישיוןרישיון MIT

7. ScrollMagic

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

• תלות: jQuery / Velocity.js
• רישיון: רישיון כפול (MIT ו- GPL)

8. על המסך

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

• תלות: jQuery
• רישיוןרישיון MIT

9. פין jQuery

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

• תלות: jQuery
• רישיוןרישיון BSD

10. דביק Float

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

• תלות: jQuery
• רישיוןYou לא מוגדר

11. זברה פין

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

• תלות: jQuery
• רישיון: רישיון GPL

12. HC-Sticky

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

• תלות: jQuery
• רישיוןרישיון MIT

13. Mojo דביק

דביק מוג'ו הוא קל, מהיר, וגמיש תוסף jQuery לעשות אלמנטים דביקים מדהים. זה תואם עם דפדפנים מודרניים יהיה לבזות בחינניות ב- IE.

• תלות: jQuery
• רישיוןרישיון MIT

14. דביק Navbar

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

• תלות: jQuery
• רישיוןרישיון MIT

15. StickyStack

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

• תלות: jQuery
• רישיוןYou לא מוגדר