如何在React.JS中添加ClassName并将其onScroll事件删除? [英] How to add a ClassName and remove it onScroll event in React.JS?

问题描述

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

I'm trying to make a Sticky Header that can change its background-color based on his position on the page. To do that, I'm trying to add a className "active" to my Styled Component "StyledHeader" that will appears when the scrollPositionY is above 400px and disappear when below.

换句话说，我想做的是此，但是使用React.JS ，JSX语法和样式化组件.

In other words, what I want to do is something like this but using React.JS, JSX syntax and Styled Components.

这是我现在拥有的:

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;

您知道一种简单的方法吗?

Do you know a simple way to do it ?

推荐答案

在您的useEffect中添加事件侦听器.当您向下滚动时，window.scrollY的值将增加，例如1、2，... 100 ..(以像素为单位)，并按照

add an event listener in your useEffect. when you scroll down the value of window.scrollY will increase such as 1, 2, ...100 .. (in px) and update your color in useState as per the window.scrollY. try something like this

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;

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

here is a working demo ..change the code as per your need.demo

我为您添加了样式组件.检查一下，让我知道它是否对您有用.要了解有关这些挂钩的更多信息，请访问 useEffect 和

I have added styled-components for you. check it out and let me know whether it works for you. to know more about these hooks go to useEffect and useCallback

这篇关于如何在React.JS中添加ClassName并将其onScroll事件删除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！