Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

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

Τι είναι μια κολλώδης κεφαλίδα;

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

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

instagram viewer

Δημιουργία κολλώδους κεφαλίδας

Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να ρυθμίσετε ένα onscroll handler. Αυτή η λειτουργία θα εκτελείται κάθε φορά που ο χρήστης κάνει κύλιση. Μπορείτε να το κάνετε αυτό προσθέτοντας ένα πρόγραμμα ακρόασης συμβάντων onscroll στο αντικείμενο του παραθύρου και από χρησιμοποιώντας αγκίστρια React. Για να ρυθμίσετε το πρόγραμμα χειρισμού onscroll, πρέπει να χρησιμοποιήσετε το άγκιστρο useEffect και τη μέθοδο addEventListener του αντικειμένου παραθύρου.

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

εισαγωγή React, { useState, useEffect } από 'αντιδρώ';
λειτουργίαStickyHeader() {
συνθ [isSticky, setSticky] = useState(ψευδής);
συνθ handleScroll = () => {
συνθ windowScrollTop = παράθυρο.κύλιση;
 εάν (windowScrollTop > 10) {
 setSticky(αληθής);
 } αλλού {
 setSticky(ψευδής);
 }
 };
 useEffect(() => {
 window.addEventListener('πάπυρος', handleScroll);
ΕΠΙΣΤΡΟΦΗ () => {
 window.removeEventListener('πάπυρος', handleScroll);
 };
 }, []);
συνθ αντικείμενα = [
 {
 όνομα: 'Σπίτι',
 Σύνδεσμος: '/'
 },
 {
 όνομα: 'Σχετικά με',
 Σύνδεσμος: '/about'
 },
 {
 όνομα: 'Επικοινωνία',
 Σύνδεσμος: '/contact'
 }
 ];
συνθ δεδομένα = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
ΕΠΙΣΤΡΟΦΗ (
<div className="App">
<στυλ κεφαλίδας={{ φόντο: είναι κολλώδες; '#fff': '', πλάτος: '100%', zIndex: '999',θέση: είναι κολλώδες;'σταθερός':'απόλυτος' }}>
 {items.map (στοιχείο => (
<ένα κλειδί href={item.link}={item.name}>
 {όνομα προϊόντος}
</ένα>
 ))}
</header>
<ul>
 {data.map((x) => {
 ΕΠΙΣΤΡΟΦΗ (<li key={x}>{Χ}</li>)
 })}
</ul>
</div>
 );
}
εξαγωγήΠροκαθορισμένο StickyHeader;

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

.κολλώδης {
 θέση: σταθερή;
 κορυφή: 0;
 πλάτος: 100%;
 z-index: 999;
}

Η σελίδα που προκύπτει θα μοιάζει με αυτό:

Επιπρόσθετα χαρακτηριστικά

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

Μπορείτε να χρησιμοποιήσετε τον παρακάτω κώδικα για να προσθέσετε ένα κουμπί back-to-top.

εισαγωγή React, { useState, useEffect } από 'αντιδρώ';
λειτουργίαStickyHeader() {
συνθ [isSticky, setSticky] = useState(ψευδής);
συνθ [showBackToTop, setShowBackToTop] = useState(ψευδής);
συνθ handleScroll = () => {
συνθ windowScrollTop = παράθυρο.κύλιση;
 εάν (windowScrollTop > 10) {
 setSticky(αληθής);
 setShowBackToTop(αληθής);
 } αλλού {
 setSticky(ψευδής);
 setShowBackToTop(ψευδής);
 }
 };
συνθ scrollToTop = () => {
παράθυρο.scrollTo({
 κορυφή: 0,
 η ΣΥΜΠΕΡΙΦΟΡΑ: 'λείος'
 });
 };
 useEffect(() => {
 window.addEventListener('πάπυρος', handleScroll);
ΕΠΙΣΤΡΟΦΗ () => {
 window.removeEventListener('πάπυρος', handleScroll);
 };
 }, []);
συνθ αντικείμενα = [
 {
 όνομα: 'Σπίτι',
 Σύνδεσμος: '/'
 },
 {
 όνομα: 'Σχετικά με',
 Σύνδεσμος: '/about'
 },
 {
 όνομα: 'Επικοινωνία',
 Σύνδεσμος: '/contact'
 }
 ];
συνθ δεδομένα = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
ΕΠΙΣΤΡΟΦΗ (
<div className="App">
<στυλ κεφαλίδας={{ φόντο: είναι κολλώδες; '#fff': '', πλάτος: '100%', zIndex: '999',θέση: είναι κολλώδες;'σταθερός':'απόλυτος' }}>
 {items.map (στοιχείο => (
<ένα κλειδί href={item.link}={item.name}>
 {όνομα προϊόντος}
</ένα>
 ))}
</header>
<ul>
 {data.map((x) => {
 ΕΠΙΣΤΡΟΦΗ (<li key={x}>{Χ}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<κουμπί onClick={scrollToTop}>Επιστροφή στην κορυφή</button>
 )}</div>
</div>
 );
}
εξαγωγήΠροκαθορισμένο StickyHeader;

Αυτός ο κώδικας δημιουργεί ένα αυτοκόλλητο στοιχείο κεφαλίδας και το διαμορφώνει χρησιμοποιώντας CSS. Μπορείτε επίσης να στυλ του στοιχείου χρησιμοποιώντας Tailwind CSS.

Εναλλακτικές Μέθοδοι

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

Χρησιμοποιώντας το react-sticky

Η βιβλιοθήκη react-sticky σάς βοηθά να δημιουργήσετε κολλώδη στοιχεία στο React. Για να χρησιμοποιήσετε το react-sticky, εγκαταστήστε το πρώτα:

npm εγκαθιστώ αντιδρώ-κολλώδες

Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε ως εξής:

εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή { StickyContainer, Sticky } από 'αντίδρα-κολλώδες'?
λειτουργίαApp() {
συνθ δεδομένα = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
ΕΠΙΣΤΡΟΦΗ (
<div>
<StickyContainer>
<Κολλώδης>{({ style }) => (
<στυλ κεφαλίδας={στυλ}>
 Αυτό είναι μια κολλώδης κεφαλίδα
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 ΕΠΙΣΤΡΟΦΗ (<li key={x}>{Χ}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Στον παραπάνω κώδικα, πρέπει πρώτα να εισαγάγετε τα στοιχεία StickyContainer και Sticky από τη βιβλιοθήκη react-sticky.

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

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

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

Χρησιμοποιώντας το react-stickynode

Το React-stickynode είναι μια άλλη βιβλιοθήκη που σας βοηθά να δημιουργήσετε κολλώδη στοιχεία στο React.

Για να χρησιμοποιήσετε το react-stickynode, εγκαταστήστε το πρώτα:

npm εγκαθιστώ react-stickynode

Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε ως εξής:

εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή Κολλώδης από 'react-stickynode';
λειτουργίαApp() {
συνθ δεδομένα = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
ΕΠΙΣΤΡΟΦΗ (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Αυτό είναι μια κολλώδης κεφαλίδα
</div>
</Sticky>
<ul>
 {data.map((x) => {
 ΕΠΙΣΤΡΟΦΗ (<li key={x}>{Χ}</li>)
 })}
</ul>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ξεκινήστε εισάγοντας το στοιχείο Sticky από τη βιβλιοθήκη react-stickynode.

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

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

Βελτιώστε την εμπειρία χρήστη

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

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

Όταν είστε έτοιμοι, μπορείτε να αναπτύξετε την εφαρμογή React δωρεάν στις Σελίδες GitHub.