Πώς να δημιουργήσετε το Sticky Footer μόνο για το CSS
Κανονικά, χρειαζόμαστε JavaScript εκτελέστε εφέ κύλισης που σχετίζονται με διαφορετικές ενέργειες χρήστη σε ιστοσελίδες. Το σενάριο κάνει τη δουλειά του την παρακολούθηση του βαθμού στον οποίο η μετακίνηση προς τα επάνω ή προς τα κάτω παίρνει μια σελίδα, και ενεργοποιεί μια ενέργεια όταν επιτευχθεί ένα ύψος κατωφλίου.
Δεν είναι ιδιαίτερα κακό να χρησιμοποιείτε το JavaScript για εφέ κύλισης. Στην πραγματικότητα υπάρχουν πιο περίπλοκες περιπτώσεις αδύνατο να λυθεί χωρίς JavaScript. Ωστόσο, υπάρχουν CSS hacks που μπορεί να αντικαταστήσει αυτά τα scripts κατά καιρούς.
Αυτή η ανάρτηση θα σας δείξει τον εαυτό σαςw για να δημιουργήσετε υποσέλιδο αποκαλύπτουν τα αποτελέσματα στη σελίδα κύλισης χρησιμοποιώντας το CSS. Θα χρησιμοποιήσουμε δύο περιπτώσεις χρήσης για να το καταδείξουμε: ένα για ολόκληρη τη σελίδα (δείτε επίδειξη) και ένα για μεμονωμένα στοιχεία σελίδας, όπως άρθρα.
Πλήρης σελίδα
Πρέπει να δημιουργήσουμε ένα υποσέλιδο εμφανίζεται από κάτω από τη σελίδα ενώ ο χρήστης πραγματοποιεί κύλιση προς τα κάτω. Επίσης, όταν μετακινούνται η σελίδα προς τα πίσω, το υποσέλιδο πρέπει να είναι να κρυφτεί κάτω από τη σελίδα και πάλι.
Για να επιτύχουμε αυτόν τον στόχο, πρώτα πρέπει να δημιουργήσουμε ένα υποσέλιδο με σταθερή θέση στο κάτω μέρος της οθόνης.
1. Δημιουργήστε ένα σταθερό υποσέλιδο
Ας είναι προσθέστε κάποιο περιεχόμενο και ένα υποσέλιδο στη σελίδα πρώτα. Χρησιμοποιώ τις ετικέτες HTML Στο demo μου, υπάρχει μια εικόνα νυχτερίδας που εμφανίζεται στο υποσέλιδο για ένα όχι τόσο τρομακτικό αποτέλεσμα, αλλά μπορείτε να επιλέξετε οποιαδήποτε άλλη εικόνα θέλετε. Το Lorem ipsum dolor κάθεται ... Μετακίνηση στο CSS, αφαιρέστε οποιοδήποτε χώρο γύρω από Δώστε κάποιες διαστάσεις ( Εφαρμόστε το Χρωματίστε και το Ρυθμίστε το Με αυτόν τον τρόπο θα υπάρχει αρκετός χώρος στο κάτω μέρος για το υποσέλιδο να είναι ορατή όταν ο χρήστης μετακινηθεί προς τα κάτω στη σελίδα. Αυτό είναι. Το υποσέλιδο αποκαλύπτει την επίδραση μιας πλήρους ιστοσελίδας. Δείτε το demo του Codepen παρακάτω. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για ένα μεμονωμένο στοιχείο HTML (με ένα υποσέλιδο) που είναι αρκετά μεγάλο χρονικό διάστημα για ένα σωστό αποτέλεσμα κύλισης σελίδας. Η μέθοδος είναι λίγο ασυμβίβαστη, καθώς αυτή τη στιγμή δεν λειτουργεί σε Chrome και IE, αλλά έχει ένα αξιοπρεπές fallback. Αρχικά, ας δημιουργήσουμε ένα μεγάλο άρθρο με ένα υποσέλιδο. Προκειμένου να προωθηθεί ο σημασιολογικός κώδικας, επέλεξα Το Lorem ipsum dolor κάθεται ... Παρακάτω μπορείτε να δείτε το βασικό στυλ του άρθρου και του υποσέλιδου. Το άρθρο μου μοιάζει τώρα με αυτό. Φυσικά μπορείτε να χρησιμοποιήσετε και άλλους βασικούς κανόνες στυλ. Το προηγούμενο υποσέλιδο ήταν σταθερό, αυτό πρόκειται να το κάνει να είναι κολλώδης. Εφαρμόστε το ο Μπορείτε να προσαρμόσετε την αξία του στο γούστο σας, αφού καθορίζει το σημείο στο οποίο το υποσέλιδο αρχίζει να εμφανίζεται ή να εξαφανίζεται ενώ ο χρήστης κινείται προς τα κάτω ή προς τα επάνω. Δώσ'το ίδια τιμή για το κατώτατο περιθώριο του άρθρου, έτσι ώστε να υπάρχει αρκετός χώρος στο κάτω μέρος για να αποκαλύψει το πλήρες υποσέλιδο. Τώρα χρειαζόμαστε ένα άνοιγμα δίπλα στο κάτω μέρος του άρθρου μέσω του οποίου μπορούμε να δούμε το κολλώδες υποσέλιδο να κυλήσει προς τα κάτω και προς τα επάνω. Για να επιτευχθεί αυτό, αντικαταστήστε το ο Τέλος, ας είναι τοποθετήστε το υποσέλιδο πίσω από το άρθρο χρησιμοποιώντας το Και αυτό είναι, το στοιχείο της μεμονωμένης σελίδας με το φαινόμενο αποκαλύψεως on-scroll γίνεται. Ελέγξτε την πένα Codepen παρακάτω. Μπορείτε επίσης να βρείτε και τις δύο περιπτώσεις χρήσης στη σελίδα μας Github. και για τη σημασιολογία. Ωστόσο,
Κρατήστε κύλιση έως ότου δείτε το υποσέλιδο
ετικέτα από ορίζοντας τα περιθώρια στο 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;
Στοιχεία επιμέρους σελίδας
1. Δημιουργήστε ένα μακρύ άρθρο
και .
Άρθρο 1
άρθρο 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.
