Estoy tratando de agregar el efecto de barra de navegación fija a la barra de navegación de un sitio cuando un usuario se desplaza hacia abajo. es decir, quiero que la barra de navegación se fije en la parte superior de la página cuando el navegador se desplaza hacia abajo a cierta altura
Estoy tratando de implementar esto con ganchos de reacción. Aquí está el código para la barra de navegación.
Navbar.js
import { useEffect, useState } from "react"; const NavBar = () => { // sticky nav const [stickyClass, setStickyClass] = useState(""); function stickNavbar() { let windowHeight = window.scrollY; setStickyClass("sticky-nav") ? windowHeight > 500 : setStickyClass(""); } useEffect(() => { window.addEventListener("scroll", stickNavbar); }, []); return ( <nav className="relative w-full p-4"> <div className={`flex w-full flex-row items-center justify-between ${stickyClass}`}> navbar content goes here .... <div/> <nav/> Estoy usando tailwindcss para diseñar, por lo que no hay una hoja de estilo externa, sin embargo, la clase sticky-nav aplica algunas de las clases de utilidad de tailwindcss.
componentes.css
/* Navbar */ .sticky-nav { @apply fixed top-0 left-0 w-full shadow-md z-20; }Lo investigué en línea, pero no apareció nada realmente útil, realmente esperaba que alguien pudiera ayudarme aquí :).
Prueba esto :
import React, { useState, useEffect } from 'react'; export default function Navbar() { const [stickyClass, setStickyClass] = useState('relative'); useEffect(() => { window.addEventListener('scroll', stickNavbar); return () => { window.removeEventListener('scroll', stickNavbar); }; }, []); const stickNavbar = () => { if (window !== undefined) { let windowHeight = window.scrollY; windowHeight > 500 ? setStickyClass('fixed top-0 left-0 z-50') : setStickyClass('relative'); } }; return <div className={`h-16 w-full bg-gray-200 ${stickyClass}`}>Navbar</div>; }Demostración (sin Tailwinds pero con el mismo resultado): Stackblitz
Hay un atributo en el viento de cola para lograr eso.