Comment créer un en-tête collant dans React

Certaines conceptions de sites Web utilisent un en-tête qui "colle" en haut de l'écran lorsque vous faites défiler vers le bas. Un en-tête qui reste visible pendant que vous faites défiler est souvent appelé un en-tête collant.

Vous pouvez ajouter un en-tête collant à votre site React en écrivant vous-même un code personnalisé ou en utilisant une bibliothèque tierce.

Qu'est-ce qu'un en-tête collant ?

Un en-tête collant est un en-tête qui reste fixé en haut de l'écran lorsque l'utilisateur fait défiler la page. Cela peut être utile pour garder des informations importantes visibles pendant que l'utilisateur fait défiler.

Gardez à l'esprit, cependant, qu'un en-tête de bâton réduit la quantité d'espace d'écran pour votre conception restante. Si vous utilisez un en-tête collant, c'est une bonne idée de le garder court.

Création d'un en-tête collant

La première chose que vous devrez faire est de configurer un gestionnaire onscroll. Cette fonction s'exécutera à chaque défilement de l'utilisateur. Vous pouvez le faire en ajoutant un écouteur d'événement onscroll à l'objet window et en utiliser des crochets React. Pour configurer le gestionnaire onscroll, vous devez utiliser le crochet useEffect et la méthode addEventListener de l'objet window.

Le code suivant crée un composant d'en-tête collant et le stylise à l'aide de CSS.

importer Réagir, { useState, useEffect } depuis 'réagir';
fonctionStickyHeader() {
constante [isSticky, setSticky] = useState(FAUX);
constante handleScroll = () => {
constante windowScrollTop = fenêtre.scrollY ;
 si (fenêtreDéfilementHaut > 10) {
 setSticky(vrai);
 } autre {
 setSticky(FAUX);
 }
 };
 useEffet(() => {
 fenêtre.addEventListener('faire défiler', handleScroll);
retour () => {
 window.removeEventListener('faire défiler', handleScroll);
 };
 }, []);
constante articles = [
 {
 nom: 'Maison',
 lien: '/'
 },
 {
 nom: 'À propos',
 lien: '/about'
 },
 {
 nom: 'Contact',
 lien: '/contact'
 }
 ];
constante données = [ 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 ]
retour (
<div nom_classe="Application">
<style d'en-tête={{ arrière-plan: isSticky? '#fff': '', largeur: '100%', zIndex: '999',position: est-il collant ?'fixé':'absolu' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {nom de l'article}
</un>
 ))}
</header>
<ul>
 {data.map((x) => {
 retour (<li clé={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exporterdéfaut StickyHeader ;

Cette méthode utilise le style en ligne, mais vous pouvez également utiliser des classes CSS. Par exemple:

.collant {
 position: fixe ;
 haut: 0 ;
 largeur: 100 % ;
 indice z: 999 ;
}

La page résultante ressemblera à ceci :

Caractéristiques supplémentaires

Il y a quelques autres choses que vous pouvez faire pour rendre votre en-tête collant plus convivial. Par exemple, vous pouvez ajouter un bouton de retour en haut ou rendre l'en-tête transparent lorsque l'utilisateur fait défiler vers le bas.

Vous pouvez utiliser le code suivant pour ajouter un bouton de retour en haut.

importer Réagir, { useState, useEffect } depuis 'réagir';
fonctionStickyHeader() {
constante [isSticky, setSticky] = useState(FAUX);
constante [showBackToTop, setShowBackToTop] = useState(FAUX);
constante handleScroll = () => {
constante windowScrollTop = fenêtre.scrollY ;
 si (fenêtreDéfilementHaut > 10) {
 setSticky(vrai);
 setShowBackToTop(vrai);
 } autre {
 setSticky(FAUX);
 setShowBackToTop(FAUX);
 }
 };
constante scrollToTop = () => {
fenêtre.scrollTo({
 haut: 0,
 comportement: 'lisse'
 });
 };
 useEffet(() => {
 fenêtre.addEventListener('faire défiler', handleScroll);
retour () => {
 window.removeEventListener('faire défiler', handleScroll);
 };
 }, []);
constante articles = [
 {
 nom: 'Maison',
 lien: '/'
 },
 {
 nom: 'À propos',
 lien: '/about'
 },
 {
 nom: 'Contact',
 lien: '/contact'
 }
 ];
constante données = [ 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 ]
retour (
<div nom_classe="Application">
<style d'en-tête={{ arrière-plan: isSticky? '#fff': '', largeur: '100%', zIndex: '999',position: est-il collant ?'fixé':'absolu' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {nom de l'article}
</un>
 ))}
</header>
<ul>
 {data.map((x) => {
 retour (<li clé={x}>{X}</li>)
 })}
</ul>
<div>
 {montrerBackToTop && (
<bouton onClick={scrollToTop}>Retour au sommet</button>
 )}</div>
</div>
 );
}
exporterdéfaut StickyHeader ;

Ce code crée un composant d'en-tête collant et le stylise à l'aide de CSS. Vous pouvez aussi styliser le composant à l'aide de Tailwind CSS.

Méthodes alternatives

Vous pouvez également utiliser une bibliothèque tierce pour créer un en-tête collant.

Utilisation de React-Sticky

La bibliothèque react-sticky vous aide à créer des éléments collants dans React. Pour utiliser react-sticky, installez-le d'abord :

npm installer réagir-collant

Ensuite, vous pouvez l'utiliser comme ceci :

importer Réagir depuis 'réagir';
importer { StickyContainer, Collant } depuis 'réagir-collant' ;
fonctionApplication() {
constante données = [ 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 ]
retour (
<div>
<StickyContainer>
<Collant>{({ style }) => (
<style d'en-tête={style}>
 Ce est un en-tête collant
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 retour (<li clé={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exporterdéfaut application ;

Dans le code ci-dessus, vous devez d'abord importer les composants StickyContainer et Sticky à partir de la bibliothèque react-sticky.

Ensuite, vous devez ajouter le composant StickyContainer autour du contenu qui doit contenir l'élément collant. Dans ce cas, vous voulez rendre l'en-tête collant dans la liste qui le suit, alors ajoutez le StickyContainer autour des deux.

Ensuite, ajoutez le composant Sticky autour de l'élément que vous souhaitez rendre collant. Dans ce cas, c'est l'élément d'en-tête.

Enfin, ajoutez un accessoire de style au composant Sticky. Cela positionnera l'en-tête correctement.

Utilisation de React Stickynode

React-stickynode est une autre bibliothèque qui vous aide à créer des éléments collants dans React.

Pour utiliser react-stickynode, installez-le d'abord :

npm installer réagir-stickynode

Ensuite, vous pouvez l'utiliser comme ceci :

importer Réagir depuis 'réagir';
importer Collant depuis 'réagir-stickynode' ;
fonctionApplication() {
constante données = [ 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 ]
retour (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Ce est un en-tête collant
</div>
</Sticky>
<ul>
 {data.map((x) => {
 retour (<li clé={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exporterdéfaut application ;

Commencez par importer le composant Sticky depuis la bibliothèque react-stickynode.

Ensuite, ajoutez le composant Sticky autour de l'élément que vous souhaitez rendre collant. Dans ce cas, rendez l'en-tête collant en ajoutant le composant Sticky autour de lui.

Enfin, ajoutez les props enabled et bottomBoundary au composant Sticky. L'accessoire activé s'assurera que l'en-tête est collant, et l'accessoire bottomBoundary s'assurera qu'il ne va pas trop loin dans la page.

Améliorer l'expérience utilisateur

Avec un en-tête collant, il peut être facile pour l'utilisateur de perdre la trace de l'endroit où il se trouve sur la page. Les en-têtes collants peuvent être particulièrement problématiques sur les appareils mobiles, où l'écran est plus petit.

Pour améliorer l'expérience utilisateur, vous pouvez également ajouter un bouton "retour en haut". Un tel bouton permet à l'utilisateur de revenir rapidement en haut de la page. Cela peut être particulièrement utile sur les longues pages.

Lorsque vous êtes prêt, vous pouvez déployer gratuitement votre application React sur les pages GitHub.