Πώς να δημιουργήσετε το Sticky Footer μόνο για το CSS

Κανονικά, χρειαζόμαστε JavaScript εκτελέστε εφέ κύλισης που σχετίζονται με διαφορετικές ενέργειες χρήστη σε ιστοσελίδες. Το σενάριο κάνει τη δουλειά του την παρακολούθηση του βαθμού στον οποίο η μετακίνηση προς τα επάνω ή προς τα κάτω παίρνει μια σελίδα, και ενεργοποιεί μια ενέργεια όταν επιτευχθεί ένα ύψος κατωφλίου.

Δεν είναι ιδιαίτερα κακό να χρησιμοποιείτε το JavaScript για εφέ κύλισης. Στην πραγματικότητα υπάρχουν πιο περίπλοκες περιπτώσεις αδύνατο να λυθεί χωρίς JavaScript. Ωστόσο, υπάρχουν CSS hacks που μπορεί να αντικαταστήσει αυτά τα scripts κατά καιρούς.

Αυτή η ανάρτηση θα σας δείξει τον εαυτό σαςw για να δημιουργήσετε υποσέλιδο αποκαλύπτουν τα αποτελέσματα στη σελίδα κύλισης χρησιμοποιώντας το CSS. Θα χρησιμοποιήσουμε δύο περιπτώσεις χρήσης για να το καταδείξουμε: ένα για ολόκληρη τη σελίδα (δείτε επίδειξη) και ένα για μεμονωμένα στοιχεία σελίδας, όπως άρθρα.

Πλήρης σελίδα

Πρέπει να δημιουργήσουμε ένα υποσέλιδο εμφανίζεται από κάτω από τη σελίδα ενώ ο χρήστης πραγματοποιεί κύλιση προς τα κάτω. Επίσης, όταν μετακινούνται η σελίδα προς τα πίσω, το υποσέλιδο πρέπει να είναι να κρυφτεί κάτω από τη σελίδα και πάλι.

Για να επιτύχουμε αυτόν τον στόχο, πρώτα πρέπει να δημιουργήσουμε ένα υποσέλιδο με σταθερή θέση στο κάτω μέρος της οθόνης.

1. Δημιουργήστε ένα σταθερό υποσέλιδο

Ας είναι προσθέστε κάποιο περιεχόμενο και ένα υποσέλιδο στη σελίδα πρώτα. Χρησιμοποιώ τις ετικέτες HTML

και

για τη σημασιολογία. Ωστόσο,

λειτουργεί επίσης.

Στο demo μου, υπάρχει μια εικόνα νυχτερίδας που εμφανίζεται στο υποσέλιδο για ένα όχι τόσο τρομακτικό αποτέλεσμα, αλλά μπορείτε να επιλέξετε οποιαδήποτε άλλη εικόνα θέλετε.

  Κρατήστε κύλιση έως ότου δείτε το υποσέλιδο
 Το Lorem ipsum dolor κάθεται ...

Μετακίνηση στο CSS, αφαιρέστε οποιοδήποτε χώρο γύρω από ετικέτα από ορίζοντας τα περιθώρια στο 0, και να το κάνει αρκετό καιρό προσθέτοντας ένα προσαρμοσμένο ύψος για να προκαλέσετε κύλιση (αν το περιεχόμενο του σώματος στη σελίδα σας είναι αρκετά μεγάλο για να προκαλέσει κύλιση, δεν χρειάζεται να το δώσετε σε ύψος).

Δώστε κάποιες διαστάσεις (πλάτος και ύψος) στο υποσέλιδο και να καθορίσει τη θέση του στο κάτω μέρος της οθόνης με το θέση: σταθερή. και κάτω: 0; ιδιότητες.

 σώμα font-family: Crimson Text? μέγεθος γραμματοσειράς: 13pt; περιθώριο: 0;  υποσέλιδο πλάτος: 100%; ύψος: 200px; θέση: σταθερή. κάτω: 0; φόντο-χρώμα: # DD5632;

2. Απόκρυψη του υποσέλιδου

Εφαρμόστε το z-δείκτης: -1 κυριαρχήστε στο υποσέλιδο για να το κάνετε τοποθετήστε το πίσω από όλα τα άλλα στοιχεία στη σελίδα.

Χρωματίστε και το και ετικέτες λευκού για να καλύψτε το υποσέλιδο.

 σώμα, html φόντο-χρώμα: #fff;  υποσέλιδο πλάτος: 100%; ύψος: 200px; θέση: σταθερή. κάτω: 0; φόντο-χρώμα: # DD5632; z-δείκτης: -1.

3. Ρυθμίστε το περιθώριο κάτω

Ρυθμίστε το περιθώριο-κάτω απο ετικέτα ίσο με το ύψος του υποσέλιδου (στο παράδειγμα μου 200px).

Με αυτόν τον τρόπο θα υπάρχει αρκετός χώρος στο κάτω μέρος για το υποσέλιδο να είναι ορατή όταν ο χρήστης μετακινηθεί προς τα κάτω στη σελίδα.

 σώμα ύψος: 1000px; περιθώριο: 0; περιθώριο-κάτω: 200px;

Αυτό είναι. Το υποσέλιδο αποκαλύπτει την επίδραση μιας πλήρους ιστοσελίδας. Δείτε το demo του Codepen παρακάτω.

Δείτε το Ανακάλυψη υποσέλιδου στυλό σελίδας (Pure CSS) από το HONGKIAT (@ hkdc) στο CodePen.

Στοιχεία επιμέρους σελίδας

Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για ένα μεμονωμένο στοιχείο HTML (με ένα υποσέλιδο) που είναι αρκετά μεγάλο χρονικό διάστημα για ένα σωστό αποτέλεσμα κύλισης σελίδας. Η μέθοδος είναι λίγο ασυμβίβαστη, καθώς αυτή τη στιγμή δεν λειτουργεί σε Chrome και IE, αλλά έχει ένα αξιοπρεπές fallback.

1. Δημιουργήστε ένα μακρύ άρθρο

Αρχικά, ας δημιουργήσουμε ένα μεγάλο άρθρο με ένα υποσέλιδο. Προκειμένου να προωθηθεί ο σημασιολογικός κώδικας, επέλεξα

και

  Άρθρο 1
 Το Lorem ipsum dolor κάθεται ...

Παρακάτω μπορείτε να δείτε το βασικό στυλ του άρθρου και του υποσέλιδου.

 άρθρο width: 500px; φόντο-χρώμα: # FEF9F3; padding: 20px 40px;  άρθρο> υποσέλιδο ύψος: 100px; φόντο-χρώμα: # FE0178;  σώμα font-family: cormorant garamond;

Το άρθρο μου μοιάζει τώρα με αυτό. Φυσικά μπορείτε να χρησιμοποιήσετε και άλλους βασικούς κανόνες στυλ.

Άρθρο με υποσέλιδο - Βασικό στυλ

2. Κάντε το υποσέλιδο Sticky

Το προηγούμενο υποσέλιδο ήταν σταθερό, αυτό πρόκειται να το κάνει να είναι κολλώδης. Εφαρμόστε το θέση: κολλώδης κυριαρχήστε στο υποσέλιδο, έτσι θα κινηθεί μέσα στα όρια του άρθρου, αλλά ακόμα διατηρεί τη θέση του στην οθόνη ενώ ο χρήστης μετακινείται προς τα πάνω και προς τα κάτω.

 άρθρο> υποσέλιδο ύψος: 100px; φόντο-χρώμα: # FE0178; θέση: -webkit-κολλητική; θέση: κολλητική; κάτω: 80px;

ο κάτω: 80px Ο κανόνας καθορίζει τη θέση του υποσέλιδου 80px πάνω από το κάτω μέρος του άρθρου.

Μπορείτε να προσαρμόσετε την αξία του στο γούστο σας, αφού καθορίζει το σημείο στο οποίο το υποσέλιδο αρχίζει να εμφανίζεται ή να εξαφανίζεται ενώ ο χρήστης κινείται προς τα κάτω ή προς τα επάνω.

Δώσ'το ίδια τιμή για το κατώτατο περιθώριο του άρθρου, έτσι ώστε να υπάρχει αρκετός χώρος στο κάτω μέρος για να αποκαλύψει το πλήρες υποσέλιδο.

 άρθρο width: 500px; φόντο-χρώμα: # FEF9F3; padding: 20px 40px; περιθώριο-κάτω: 80px;

3. Προσθέστε ένα εν μέρει διαφανές υπόβαθρο

Τώρα χρειαζόμαστε ένα άνοιγμα δίπλα στο κάτω μέρος του άρθρου μέσω του οποίου μπορούμε να δούμε το κολλώδες υποσέλιδο να κυλήσει προς τα κάτω και προς τα επάνω.

Για να επιτευχθεί αυτό, αντικαταστήστε το χρώμα του φόντου του άρθρου με ένα γραμμική κλίση εικόνα φόντου, από την κορυφή του άρθρου μέχρι την κορυφή του υποσέλιδου χρώματος με το χρώμα φόντου του αντικειμένου και το υπόλοιπο τμήμα στο κάτω μέρος είναι διαφανές.

 άρθρο width: 500px; padding: 20px 40px; εικόνα φόντου: γραμμική κλίση (στο κάτω μέρος, # FEF9F3 calc (100% - 120px), διαφανές 0). περιθώριο-κάτω: 80px;

οcalc (100% -120px) Η λειτουργία CSS υπολογίζει το το πλήρες ύψος του αντικειμένου μείον το υποσέλιδο. Στο παράδειγμά μου, είναι 120px (100px για ύψος + 20px για την επένδυση).

Άρθρο με εικόνα φόντου γραμμικής κλίσης και κολλητικό υποσέλιδο

4. Τοποθετήστε το Υποσέλιδο Πίσω

Τέλος, ας είναι τοποθετήστε το υποσέλιδο πίσω από το άρθρο χρησιμοποιώντας το z-δείκτης: -1 Κανόνα CSS.

 άρθρο> υποσέλιδο ύψος: 100px; φόντο-χρώμα: # FE0178; θέση: -webkit-κολλητική; θέση: κολλητική; κάτω: 80px; z-δείκτης: -1.

Και αυτό είναι, το στοιχείο της μεμονωμένης σελίδας με το φαινόμενο αποκαλύψεως on-scroll γίνεται. Ελέγξτε την πένα Codepen παρακάτω. Μπορείτε επίσης να βρείτε και τις δύο περιπτώσεις χρήσης στη σελίδα μας Github.

Δείτε το απόσπασμα του υποσέλιδου πένας στα στοιχεία (Pure CSS) από το HONGKIAT (@hkdc) στο CodePen.