כיצד ליצור CSS בלבד דביק
בדרך כלל, אנחנו צריכים JavaScript ל לבצע אפקטים גלילה קשור לפעולות משתמש שונות בדפי אינטרנט. התסריט עושה את העבודה מעקב עד כמה רחוק או למטה גלילה לוקח דף, ו מפעילה פעולה כאשר מגיע גובה סף.
זה לא דבר רע במיוחד להשתמש ב- JavaScript עבור גלילה אפקטים. למעשה ישנם מקרים מורכבים יותר בלתי אפשרי לפתור ללא. עם זאת יש פריצות CSS זה יכול להחליף את התסריטים האלה בזמנים.
פוסט זה הולך להראות לך הוw כדי ליצור תחתונה לחשוף את ההשפעות על דף גלילה באמצעות CSS. אנו נשתמש בשני מקרי שימוש כדי להדגים זאת: אחד עבור כל הדף (ראה הדגמה) ואחד עבור אלמנטים בודדים בדף, כגון מאמרים.
עמוד מלא
אנחנו צריכים ליצור תחתונה כי מופיע מתחת לדף בעוד המשתמש גלילה למטה. כמו כן, כאשר הם גלילה את הדף לגבות את התחתונה צריך להיות מוסתרים מתחת לדף.
כדי להשיג מטרה זו, תחילה עלינו ליצור תחתונה עם מיקום קבוע בתחתית המסך.
1. צור תחתונה קבועה
ללא שם: בואו להוסיף קצת תוכן תחתונה אל הדף הראשון. אני משתמש בתגי HTML בהדגמה שלי, יש בת התמונה המוצגת בתוך תחתונה עבור אפקט מפחיד לא כל כך, אבל אתה יכול לבחור כל תמונה אחרת שאתה אוהב. לורם ipsum dolor לשבת amet ... מעבר ל- CSS, להסיר כל מקום סביב ה תן מספר מאפיינים ( החל את צבע הן הגדר את בדרך זו יהיה מספיק מקום בתחתית עבור תחתונה ל להיות גלוי כאשר המשתמש גולל לאורך הדף. זהו זה. תחתונה לחשוף את האפקט עבור דף אינטרנט מלא נעשה. בדוק את הדגמה Codepen להלן. טכניקה זו יכולה לשמש עבור אלמנט HTML בודד (עם כותרת תחתונה) זה ארוך מספיק עבור אפקט גלילה בדף הנכון. השיטה היא קצת hacky, כפי שהוא כרגע לא עובד ב- Chrome ו- IE, אבל יש לו נסיגה הגון. ראשית, בואו ליצור מאמר ארוך עם תחתונה. כדי לקדם קוד סמנטי, בחרתי לורם ipsum dolor לשבת amet ... להלן תוכל לראות את סגנון בסיסי של הכתבה והכותרת התחתונה. המאמר שלי נראה כרגע. כמובן שאתה יכול להשתמש בכללים בסיסיים אחרים בסגנון גם כן. הכותרת התחתונה הקודמת תוקנה, זה הולך להיות דביק. החל את ה אתה יכול לשנות את הערך שלו לטעמך, שכן הוא קובע את הנקודה שבה תחתונה מתחיל להופיע או להיעלם בזמן שהמשתמש גלילה למטה או למעלה. תן את אותו ערך עבור השוליים התחתונים של המאמר, כך שיהיה מספיק מקום בתחתית לחשוף את תחתונה מלאה. עכשיו אנחנו צריכים פתח הבא לתחתית המאמר שבאמצעותו אנו יכולים לראות את התחתונה דביק גלילה למטה ומעלה. כדי להשיג זאת, החלף את ה לבסוף, בואו הנח את הכותרת התחתונה מאחורי הכתבה משתמש ב וזהו, אלמנט הדף הפרט עם אפקט גלילה על הגלילה נעשה. בדוק את העט Codepen למטה. ניתן גם למצוא שני מקרי שימוש בדף Github שלנו. ו עבור סמנטיקה. למרות זאת,
המשך לגלול עד שתראה את הכותרת התחתונה
על ידי הגדרת השוליים ל -0, ולעשות את זה מספיק זמן על ידי הוספת גובה מותאם אישית כדי לגרום לגלילה (אם תוכן הגוף בדף שלך ארוך מספיק כדי לגרום לגלילה, אין צורך לתת לו גובה).רוחב ו גובה) לכותרת התחתונה, ו לתקן את עמדתה לתחתית המסך עם מיקום: קבוע; ו bottom: 0; נכסים. body font-family: Crimson Text; font-size: 13pt; שוליים: 0; כותרת תחתונה רוחב: 100%; גובה: 200px; מיקום: קבוע; bottom: 0; צבע רקע: # DD5632;
2. הסתר את הכותרת התחתונה
z-index you -1 הכלל לכותרת התחתונה כדי לשים אותו מאחורי כל האלמנטים האחרים על הדף. ו תגים לבנים כדי לכסות את תחתונה. body, html background-color: #fff; כותרת תחתונה רוחב: 100%; גובה: 200px; מיקום: קבוע; bottom: 0; צבע רקע: # DD5632; z-index you -1;
.3 התאם את השוליים התחתונים
שולי תחתית של ה תג שווה לגובה של תחתונה (בדוגמה שלי 200px). גוף height: 1000px; שוליים: 0; margin-bottom: 200px;
אלמנטים בודדים
1. יצירת מאמר ארוך
ו .
מאמר 1
article width: 500px; צבע רקע: # FEF9F3; ריפוד: 20px 40px; article> footer height: 100px; צבע רקע: # FE0178; body font-family: cormorant garamond;
2. הפוך את הכותרת התחתונה דביק
מיקום: דביק הכלל לכותרת התחתונה, כך שזה יעבור בתוך גבולות המאמר אבל עדיין לשמור על מעמדה על המסך בזמן שהמשתמש מגלגל מעלה ומטה. מאמר> תחתונה גובה: 100px; צבע רקע: # FE0178; מיקום: -webkit-sticky; מיקום: דביק; bottom: 80px;
בתחתית: 80px הכלל מתקן את המיקום של תחתונה 80px מעל לתחתית המאמר. article width: 500px; צבע רקע: # FEF9F3; ריפוד: 20px 40px; margin-bottom: 80px;
3. הוסף רקע שקוף חלקית
צבע רקע של המאמר עם שיפוע ליניארי תמונת רקע, אשר מהחלק העליון של המאמר לחלק העליון של הכותרת התחתונה צבעוני עם צבע הרקע של המאמר, ואת החלק הנותר לתחתית הוא עשה שקוף. article width: 500px; ריפוד: 20px 40px; תמונת רקע: שיפוע לינארי (לתחתית, # FEF9F3 Calc (100% - 120px), שקוף 0); margin-bottom: 80px;
קלס (100% -120 פיקסלים) הפונקציה CSS מחשבת את גובה מלא של המאמר מינוס הכותרת התחתונה. בדוגמה שלי, זה 120px (100px לגובה + 20px לריפוד).
4. הנח את הכותרת התחתונה
z-index you -1 כלל CSS. מאמר> תחתונה גובה: 100px; צבע רקע: # FE0178; מיקום: -webkit-sticky; מיקום: דביק; bottom: 80px; z-index you -1;
