ReactJS - 在滚动时更改导航栏颜色

Question

我有以下代码：

import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => 
{
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () =>
  {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

  window.addEventListener('scroll', changeNavBg);

  return (
  <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
  )
}

我想要实现的是，当滚动超过 800 像素时，我希望我的 Header 改变颜色。

为你的时间干杯。

Answer 1

您可以尝试以下几种方法

1。使用 React onScroll UI 事件

 return (
   <div onScroll={changeNavBg}>
     <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
   </div>
 )

2。考虑将监听器绑定到useEffect

import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => {
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () => {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

  useEffect(() => {
    window.addEventListener('scroll', changeNavBg);
    return () => {
      window.removeEventListener('scroll', changeNavBg);
    }
  }, [])

  return (
  <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
  )
}