Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

60
Views
Changing color of Navbar react js

I am trying to change the color of my navbar using this code.

  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);
    };
  });

This is how I am making navbar

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

However, when I scroll down the web page crashes, although the code looks fine.

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Try this logic code.

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)
  }, [])
}
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs