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

Question

我正在尝试制作一个 Sticky Header，它可以根据他在页面上的位置更改其背景颜色。为此，我尝试将一个类名 "active" 添加到我的样式化组件 "StyledHeader" 中，它会在 scrollPositionY 高于 400px 时出现并在低于 400px 时消失。

换句话说，我想做的是 this，但使用 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;

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

Answer 1

在您的 useEffect 中添加一个事件侦听器。当您向下滚动时，window.scrollY 的值将增加，例如 1、2、...100 ..（以像素为单位）并根据 [=18] 在 useState 中更新您的 color =].尝试这样的事情

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

编辑：我已经为您添加了样式组件。检查一下，让我知道它是否适合你。要了解有关这些挂钩的更多信息，请访问 and

Answer 2

我自己没有运行这个代码，但可能是这样的：

const Header = () => {
  const headerEl = React.useRef();
  const [offsetTop, setOffsetTop] = React.useState(0);

  React.useEffect(() => {
    window.addEventListener("scroll", onScroll, false);
    return () => {
      window.removeEventListener("scroll", onScroll, false); // to remove scroll event on unmount
    };
  }, []);

  const onScroll = () => setOffsetTop(headerEl.current.offsetTop);

  return (
    <StyledHeader ref={headerEl} className={offsetTop > 400 ? "active" : ""}>
      ...
    </StyledHeader>
  );
};

export default Header;

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

How to add a ClassName and remove it onScroll event in React.JS?

jsx

reactjs

styled-components