如何在 React.JS 中添加 ClassName 并删除 onScroll 事件？

我正在尝试制作一个粘性标题，可以根据他在页面上的位置更改其背景颜色。为此，我尝试将 className“active”添加到我的样式组件“StyledHeader”中，当滚动位置 Y 高于 400 像素时，它将出现，低于 400 像素时消失。

换句话说，我想做的是this http://jsfiddle.net/onigetoc/1e8k9q8b/但使用 React.JS、JSX 语法和样式组件。

这是我现在所拥有的：

import { Link } from '@reach/router';

import DuskLogo from '../images/dusk_logo.svg';

import { 
    StyledHeader, 
    StyledDuskLogo
} from '../styles/StyledHeader';

const Header = () => (
<StyledHeader>
  <div className="header-content">
    <Link to="/">
    <StyledDuskLogo src={DuskLogo} alt="dusk-logo" />
    </Link>
  </div>
</StyledHeader>
)

export default Header;

你知道一个简单的方法吗？

在您的中添加一个事件监听器useEffect。当你向下滚动值时window.scrollY将增加，例如 1, 2, ...100 ..（以 px 为单位）并更新您的color in useState根据window.scrollY https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY。尝试这样的事情

const StyledBody = window.styled.div`
  background: lightgray;
  height: 5000px;
`;

const StyledText = window.styled.h4`
  text-align: center;
  width: 250px;
  margin: auto;
  line-height: 40px;
`;

const StyledHeader = window.styled.div`
  background-color: ${props => props.color};
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0px;
  padding: 0;
  z-index: 10000;
  transition: all 1s ease-in-out;
`;

const Header = () => {
  const [color, setColor] = React.useState("rgba(17, 42, 107, 0.7)");

  const handleScroll = React.useCallback((event) => {
    let scrollTop = window.scrollY;

      //console.log(scrollTop );  //1,2,...100,...200...etc (in px)

      if (scrollTop >= 20 && scrollTop < 50) {
        setColor("yellow");
      }

      if (scrollTop >= 50 && scrollTop < 90) {
        setColor("red");
      }

      if (scrollTop >= 90 && scrollTop < 120) {
        setColor("green");
      }
      if (scrollTop >= 120 && scrollTop < 150) {
        setColor("blue");
      }
      if (scrollTop >= 150 && scrollTop < 180) {
        setColor("violet");
      }
      if (scrollTop >= 180 && scrollTop < 210) {
        setColor("purple");
      }
});

  React.useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll, false);
    };
  }, []);

  return (
    <StyledBody>
      <StyledHeader color={color}>
        <StyledText>My background color changes</StyledText>
      </StyledHeader>
    </StyledBody>
  );
};

export default Header;

这是一个工作演示..根据您的需要更改代码。demo http://jsfiddle.net/blueseal/hLjq1bex/50/

编辑：我已经为您添加了样式组件。检查一下并告诉我它是否适合您。要了解有关这些挂钩的更多信息，请访问useEffect https://stackoverflow.com/a/53465182/5124488 and useCallback https://stackoverflow.com/a/54569923/5124488