小编Sae*_*lan的帖子

如何在滚动时显示或隐藏导航栏使用react.js?

我使用了带有useState和useEffect的react.js Hooks,当我向下滚动并且屏幕向下时,标题在250像素后隐藏。现在我想知道如何在向上滚动时使用 React Hooks 显示标题。

const Navbar = () => {
  const [show, setShow] = useState(false)
  const controlNavbar = () => {
      if (window.scrollY > 250 ) {
          setShow(true)
      }else{
        setShow(false)
      }
  }

  useEffect(() => {
      window.addEventListener('scroll', controlNavbar)
      return () => {
          window.removeEventListener('scroll', controlNavbar)
      }
  }, [])
Run Code Online (Sandbox Code Playgroud)

和标题:

 <header className={`active ${show && 'hidden'}`}></header>
Run Code Online (Sandbox Code Playgroud)

CSS:

.active{
    height: 4rem;
    width: 100%;
    position: fixed;
    top: 0px;
    transition: 0.3s linear;
    display: flex;
    justify-content:stretch;
    align-items: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, .1); …
Run Code Online (Sandbox Code Playgroud)

javascript scroll reactjs react-hooks use-state

15
推荐指数
3
解决办法
3万
查看次数

标签 统计

javascript ×1

react-hooks ×1

reactjs ×1

scroll ×1

use-state ×1