• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

96
Views
Cambio de color de Navbar reaccionar js

Estoy tratando de cambiar el color de mi barra de navegación usando este código.

 const [navbarColor, setNavbarColor] = useState("navbar-transparent"); const [collapseOpen, setCollapseOpen] = useState(false); useEffect(() => { const updateNavbarColor = () => { if ( document.documentElement.scrollTop > 399 || document.body.scrollTop > 399 ) { setNavbarColor(""); } else if ( document.documentElement.scrollTop < 400 || document.body.scrollTop < 400 ) { setNavbarColor("navbar-transparent"); } }; window.addEventListener("scroll", updateNavbarColor); return function cleanup() { window.removeEventListener("scroll", updateNavbarColor); }; });

Así es como estoy haciendo la barra de navegación

 <Navbar className={"fixed-top " + navbarColor} expand="lg" color="info">

Sin embargo, cuando me desplazo hacia abajo, la página web falla, aunque el código se ve bien.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Pruebe este código lógico.

 import { useEffect } from 'react' export function useObservableAnimations() { const animationOnScroll = () => { const target = document.querySelectorAll('[data-animation') target.forEach(element => { if (element.getBoundingClientRect().top < window.innerHeight) { element.classList.add('animation-start') return } element.classList.remove('animation-start') }) } useEffect(() => { window.addEventListener('scroll', animationOnScroll) }, []) }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error