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

debugcn 发表于 Dev

性质

我正在尝试制作一个可以根据其在页面上的位置来更改其背景颜色的粘性页眉。为此，我尝试将className“ active”添加到我的样式组件“ StyledHeader”中，当scrollPositionY高于400px时将出现，而在不足400px时将消失。

换句话说，我想要做的就是这样，但是要使用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 ...（单位：像素）和更新您color在useState按了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;

这是一个有效的演示..根据您的需要更改代码。演示

编辑：我已经为您添加了样式组件。检查一下，让我知道它是否对您有用。了解更多有关这些钩子去useEffect和useCallback

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。