Reactjs 如何在React.JS中的Croll事件中添加并删除类名？

我试图制作一个粘性标题，可以根据他在页面上的位置改变其背景颜色。为此，我尝试将类名“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;

从'@reach/router'导入{Link}；
从“../images/dash_logo.svg”导入黄昏标志；
导入{
时尚领袖，
StyledDuskLogo
}来自“../styles/StyledHeader”；
常量头=（）=>(
)
导出默认标题；

---

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

在你的

useffect

中添加一个事件监听器。当您向下滚动

窗口的值时。滚动
会增加，例如1、2、…100。。（在px中）并在
useState
中根据更新您的
颜色。试试这样的

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;

constyledbody=window.styled.div`
背景：浅灰色；
高度：5000px；
`;
const StyledText=window.styled.h4`
文本对齐：居中；
宽度：250px；
保证金：自动；
线高：40px；
`;
const StyledHeader=window.styled.div`
背景色：${props=>props.color}；
宽度：100%；
高度：自动；
位置：固定；
排名：0；
左：0；
右：0px；
填充：0；
z指数：10000；
过渡：所有1都易于输入输出；
`;
常量头=（）=>{
const[color，setColor]=React.useState（“rgba（17,42,107,0.7）”；
const handleScroll=React.useCallback（（事件）=>{
让scrollTop=window.scrollY；
//console.log（scrollTop）；//1,2，…100，…200…等（在px中）
如果（scrollTop>=20&&scrollTop<50）{
设置颜色（“黄色”）；
}
如果（scrollTop>=50&&scrollTop<90）{
设置颜色（“红色”）；
}
如果（scrollTop>=90&&scrollTop<120）{
设置颜色（“绿色”）；
}
如果（scrollTop>=120&&scrollTop<150）{
setColor（“蓝色”）；
}
如果（scrollTop>=150&&scrollTop<180）{
色（“紫”）；
}
如果（scrollTop>=180&&scrollTop<210）{
毛色（“紫色”）；
}
});
React.useffect（（）=>{
window.addEventListener（“滚动”，handleScroll）；
return（）=>{
removeEventListener（“滚动”，handleScroll，false）；
};
}, []);
返回(
我的背景颜色改变了
);
};
导出默认标题；

这是一个工作演示。根据需要更改代码

编辑：我为您添加了样式化组件。检查一下，让我知道它是否适合你。要了解更多关于这些钩子的信息，请访问，我自己还没有运行过这段代码，但可能类似于：

const头=（）=>{
const headerell=React.useRef（）；
const[offsetTop，setOffsetTop]=React.useState（0）；
React.useffect（（）=>{
window.addEventListener（“滚动”，onScroll，false）；
return（）=>{
removeEventListener（“scroll”，onScroll，false）；//在卸载时删除滚动事件
};
}, []);
const onScroll=（）=>setOffsetTop（headerre.current.offsetTop）；
返回(
400？“活动”：“}>
...
);
};
导出默认标题；
这似乎不起作用。不幸的是，offsetTop一直为这个详细答案返回0，但我无法让它在我的项目中工作。我看不出我怎么能以Header或StyledHeader而不是app为目标。主要是因为Header变成了一个div，只有一个随机生成的类。我还尝试将一个类应用于标题并将其作为目标，但它似乎不起作用。我做错了什么here@Dabu我已经更新了我的代码。让我知道它是否有效