Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Algunos diseños de sitios web utilizan un encabezado que se "pega" en la parte superior de la pantalla a medida que se desplaza hacia abajo. Un encabezado que permanece visible mientras se desplaza a menudo se denomina encabezado fijo.

Puede agregar un encabezado fijo a su sitio de React escribiendo un código personalizado usted mismo o usando una biblioteca de terceros.

¿Qué es un encabezado adhesivo?

Un encabezado adhesivo es un encabezado que permanece fijo en la parte superior de la pantalla mientras el usuario se desplaza hacia abajo en la página. Esto puede ser útil para mantener visible la información importante a medida que el usuario se desplaza.

Tenga en cuenta, sin embargo, que un encabezado fijo reduce la cantidad de espacio en pantalla para su diseño restante. Si usa un encabezado fijo, es una buena idea que sea breve.

Crear un encabezado fijo

instagram viewer

Lo primero que deberá hacer es configurar un controlador de desplazamiento. Esta función se ejecutará cada vez que el usuario se desplace. Puede hacer esto agregando un detector de eventos onscroll al objeto de la ventana y usando ganchos de reacción. Para configurar el controlador de desplazamiento, debe usar el gancho useEffect y el método addEventListener del objeto de ventana.

El siguiente código crea un componente de encabezado fijo y le da estilo usando CSS.

importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';
funciónStickyHeader() {
constante [esPegajoso, establecerPegajoso] = usarEstado(FALSO);
constante manejarDesplazamiento = () => {
constante ventanaDesplazamientosuperior = ventana.scrollY;
 si (windowScrollTop > 10) {
 establecerPegajoso(verdadero);
 } demás {
 establecerPegajoso(FALSO);
 }
 };
 usarEfecto(() => {
 ventana.addEventListener('Desplazarse', manejarDesplazamiento);
devolver () => {
 ventana.removeEventListener('Desplazarse', manejarDesplazamiento);
 };
 }, []);
constante artículos = [
 {
 nombre: 'Hogar',
 enlace: '/'
 },
 {
 nombre: 'Acerca de',
 enlace: '/about'
 },
 {
 nombre: 'Contacto',
 enlace: '/contact'
 }
 ];
constante datos = [ 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 ]
devolver (
<div className="aplicación">
<estilo de encabezado = {{ fondo: isSticky? '#fff': '', ancho: '100%', índice z: '999',posición: isSticky ?'fijado':'absoluto' }}>
 {elementos.mapa (elemento => (
<a href={elemento.enlace} clave={elemento.nombre}>
 {nombre del árticulo}
</a>
 ))}
</header>
<ul>
 {datos.mapa((x) => {
 devolver (<tecla li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportarpor defecto StickyHeader;

Este método usa estilos en línea, pero también puede usar clases CSS. Por ejemplo:

.pegajoso {
 posición: fija;
 superior: 0;
 ancho: 100%;
 índice z: 999;
}

La página resultante se verá así:

Características adicionales

Hay algunas otras cosas que puede hacer para que su encabezado fijo sea más fácil de usar. Por ejemplo, puede agregar un botón de regreso al principio o hacer que el encabezado sea transparente cuando el usuario se desplaza hacia abajo.

Puede usar el siguiente código para agregar un botón de regreso al principio.

importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';
funciónStickyHeader() {
constante [esPegajoso, establecerPegajoso] = usarEstado(FALSO);
constante [showBackToTop, setShowBackToTop] = useState(FALSO);
constante manejarDesplazamiento = () => {
constante ventanaDesplazamientosuperior = ventana.scrollY;
 si (windowScrollTop > 10) {
 establecerPegajoso(verdadero);
 setMostrarVolverArriba(verdadero);
 } demás {
 establecerPegajoso(FALSO);
 setMostrarVolverArriba(FALSO);
 }
 };
constante desplazarse hacia arriba = () => {
ventana.scrollTo({
 superior: 0,
 comportamiento: 'liso'
 });
 };
 usarEfecto(() => {
 ventana.addEventListener('Desplazarse', manejarDesplazamiento);
devolver () => {
 ventana.removeEventListener('Desplazarse', manejarDesplazamiento);
 };
 }, []);
constante artículos = [
 {
 nombre: 'Hogar',
 enlace: '/'
 },
 {
 nombre: 'Acerca de',
 enlace: '/about'
 },
 {
 nombre: 'Contacto',
 enlace: '/contact'
 }
 ];
constante datos = [ 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 ]
devolver (
<div className="aplicación">
<estilo de encabezado = {{ fondo: isSticky? '#fff': '', ancho: '100%', índice z: '999',posición: isSticky ?'fijado':'absoluto' }}>
 {elementos.mapa (elemento => (
<a href={elemento.enlace} clave={elemento.nombre}>
 {nombre del árticulo}
</a>
 ))}
</header>
<ul>
 {datos.mapa((x) => {
 devolver (<tecla li={x}>{X}</li>)
 })}
</ul>
<división>
 {showBackToTop && (
<botón onClick={scrollToTop}>Volver arriba</button>
 )}</div>
</div>
 );
}
exportarpor defecto StickyHeader;

Este código crea un componente de encabezado fijo y le da estilo usando CSS. Tú también puedes diseñe el componente usando Tailwind CSS.

Métodos alternativos

También puede usar una biblioteca de terceros para crear un encabezado fijo.

Usando react-sticky

La biblioteca sticky de reacción te ayuda a crear elementos sticky en React. Para usar react-sticky, primero instálalo:

npm instalar reaccionar-pegajoso

Entonces, puedes usarlo así:

importar Reaccionar de 'reaccionar';
importar { Contenedor Adherido, Adhesivo } de 'reaccionar pegajoso';
funciónaplicación() {
constante datos = [ 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 ]
devolver (
<división>
<StickyContainer>
<Pegajoso>{({ estilo }) => (
<estilo de encabezado = {estilo}>
 Este es un encabezado pegajoso
</header>
 )}
</Sticky>
<ul>
 {datos.mapa((x) => {
 devolver (<tecla li={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exportarpor defecto aplicación;

En el código anterior, primero debe importar los componentes StickyContainer y Sticky de la biblioteca react-sticky.

Luego, debe agregar el componente StickyContainer alrededor del contenido que debe contener el elemento fijo. En este caso, desea que el encabezado sea fijo dentro de la lista que lo sigue, así que agregue el StickyContainer alrededor de los dos.

A continuación, agregue el componente Adhesivo alrededor del elemento que desea convertir en adhesivo. En este caso, ese es el elemento de encabezado.

Finalmente, agregue un accesorio de estilo al componente Sticky. Esto colocará el encabezado correctamente.

Usando react-stickynode

React-stickynode es otra biblioteca que te ayuda a crear elementos pegajosos en React.

Para usar react-stickynode, primero instálelo:

npm instalar reaccionar-stickynode

Entonces puedes usarlo así:

importar Reaccionar de 'reaccionar';
importar Pegajoso de 'reaccionar-stickynode';
funciónaplicación() {
constante datos = [ 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 ]
devolver (
<división>
<Sticky habilitado = {true} bottomBoundary = {1200}>
<división>
 Este es un encabezado pegajoso
</div>
</Sticky>
<ul>
 {datos.mapa((x) => {
 devolver (<tecla li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportarpor defecto aplicación;

Comience importando el componente Sticky de la biblioteca de react-stickynode.

Luego, agregue el componente Adhesivo alrededor del elemento que desea hacer adhesivo. En este caso, haga que el encabezado sea adhesivo agregando el componente Adhesivo a su alrededor.

Finalmente, agregue los accesorios habilitados y bottomBoundary al componente Sticky. La propiedad habilitada se asegurará de que el encabezado sea fijo, y la propiedad bottomBoundary se asegurará de que no vaya demasiado abajo en la página.

Mejore la experiencia del usuario

Con un encabezado fijo, puede ser fácil para el usuario perder la noción de dónde se encuentra en la página. Los encabezados fijos pueden ser especialmente problemáticos en los dispositivos móviles, donde la pantalla es más pequeña.

Para mejorar la experiencia del usuario, también puede agregar un botón "volver al principio". Dicho botón permite al usuario desplazarse rápidamente hacia atrás hasta la parte superior de la página. Esto puede ser especialmente útil en páginas largas.

Cuando esté listo, puede implementar su aplicación React de forma gratuita en las páginas de GitHub.