Question

我正在尝试制作一个可以根据其在页面上的位置更改其背景颜色的粘性页眉。为此，我尝试将className“ 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 ..（以像素为单位），并按照{{3 }}。尝试这样的事情

color

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

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

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事件删除？

2 个答案: