score:2

const [navBackground, setNavBackground] = useState(false)
  const navRef = useRef()
  navRef.current = navBackground
  useEffect(() => {
    const handleScroll = () => {
      const show = window.scrollY > 670
      if (navRef.current !== show) {
        setNavBackground(show)
      }
    }
    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  }, [])

//then
<Navbar
    backgroundColor={navBackground ? 'white' : 'transparent'}
    style={{ transition: '1s ease' }}
  />

Related Query

More Query from same tag