jquery - 如何在react.js中更改滚动导航栏的背景和文本颜色？

Question

我正在尝试在react.js中添加透明导航栏，现在我想更改滚动导航栏的背景和文本颜色。

    <div className="logo">
      <a href='/'>
      <img alt='logo' src={require('./images/local/Wings-Logo-512.png')}/>
      </a>
    </div>

背景颜色应该在滚动时改变。

Answer 1

应使用 window.scrollY 修复

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' }}
  />