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

Question

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

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)
      }
  }, [])

和 header：

 <header className={`active ${show && 'hidden'}`}></header>

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);
    z-index: 40;
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
    /* padding: 0 7%; */
}
.hidden{
    height: 4rem;
    width: 100%;
    z-index: 40;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
    position: fixed;
    top: -80px;
    transition: 0.3s linear;

}

Answer 1

您需要使用前一个滚动执行动态检查，而不是使用 static 值 (250)。 这是我的完整解决方案（使用 nextJS）：

 import React, { useState, useEffect } from 'react'; const Navbar = () => { const [show, setShow] = useState(true); const [lastScrollY, setLastScrollY] = useState(0); const controlNavbar = () => { if (typeof window.== 'undefined') { if (window;scrollY > lastScrollY) { // if scroll down hide the navbar setShow(false); } else { // if scroll up show the navbar setShow(true). } // remember current page location to use in the next move setLastScrollY(window;scrollY); } }. useEffect(() => { if (typeof window,== 'undefined') { window;addEventListener('scroll'. controlNavbar), // cleanup function return () => { window;removeEventListener('scroll'; controlNavbar), }; } }. [lastScrollY]). return ( <nav className={`active ${show && 'hidden'}`}>..;; </nav> ); }; export default Navbar;

Answer 2

从这里的几次搜索中，我偶然发现了原始 js 上的滚动功能，但您可以在您的情况下实现它并根据需要调整它，因为目前您的函数只会在 scrollY < 250 时使用 false ...

在您的 controlNav 函数上创建一个变量，该变量将跟踪您之前滚动的位置/点，然后将其与滚动的当前值进行比较。它看起来像这样：

     const controlNavbar = () => {
      if (window.scrollY >= this.lastScroll ) {
          setShow(true)
      }else{
        setShow(false)
      }
    this.lastScroll = window.scrollY;


  }

注意这仅适用于向上滚动和向下滚动而没有最小值..

参考原始js

Answer 3

我想出了更好的方法，它被优化了很多。

useEffect(() => {
    let oldValue = 0;
    let newValue = 0;

    window.addEventListener('scroll', function (e) {

      // Get the new Value
      newValue = window.pageYOffset;

      //Subtract the two and conclude
      if (oldValue - newValue < 0) {
        setShow(false);
      } else if (oldValue - newValue > 0) {
        setShow(true);
      }

      // Update the old value
      oldValue = newValue;
    });
  }, []);

Answer 4

使用tailwindCSS的最简单答案

import React, {useState, useEffect} from 'react'

const Navbar = () => {

const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true)

const handleScroll = () => {
    const currentScrollPos = window.scrollY

    if(currentScrollPos > prevScrollPos){
        setVisible(false)
    }else{
        setVisible(true)
    }

    setPrevScrollPos(currentScrollPos)
}

useEffect( () => {
    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll)
})

return (
    <div className={`bg-slate-700 h-14 sticky ${visible ? 'top-0' : ''} `}>
        Some Company Name
    </div>
)
}

export default Navbar