Hide or show navbar in ReactJS?-CodePudding

I was wondering how to change the navbar behavior based on the webpage position. I've seen a lot of tutorials about how to hide/show a navbar on scroll, which vie managed to implement successfully, however that seems to just cover two states. I would like my navbar to have three: show when I scroll up, hide when I scroll down, and change opacity if I'm at the top of the website. I've tried using a variety of useEffects and event listeners but I'm quite new to react and js.

Here's a good example of the effect I'm looking for https://brittanychiang.com/. As you can see once you are at the top of the webpage the opacity changes as well as the drop shadow, it all seems to be 'stuck' at the top instead of the floating look when you scroll up/down. Using dev tools I've found that the navbar class does seem to have three different names depending on the location of the scrollbar.

Thanks in advance!

CodePudding user response：

You have to handle 'scroll' events using your component's lifecycle functions.

Please find this example for your header component. With some tweaks you may be able to use it.

Class component:

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate // and use this on your header
    });
},

Functional component:

const [headerPosition, setHeaderPosition] = useState(0)

const handleScroll = useCallback((event) => {
     let scrollTop = event.srcElement.body.scrollTop,
     itemTranslate = Math.min(0, scrollTop/3 - 60);
        
     setHeaderPosition({
        transform: itemTranslate // and use this on your header
     });
}, [setHeaderPosition])
    
useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll])

CodePudding user response：

use blank array in useEffect to run it once when mounted

then use one state to set as (top,down,up) from window scroll event

working demo

export function headerSystem(){
    const [hState,sethState] = useState("top")

    useEffect(()=>{
        var lastVal = 0
        window.onscroll = function(){
            let y = window.scrollY
            if(y > lastVal){sethState("down")}
            if(y < lastVal) {sethState("up")}
            if(y === 0) {sethState("top")}
            lastVal = y
        }        
    },[])

    return (     
        <div className="root">
            <div className={"header text-center p-4 bg-blue-200 fixed w-full text-lg font-semibold "   hState}>this is header</div>
            <div className="pageContent bg-green-500">
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
            </div>
        </div>
    )
}

css

  .header {
    background: rgba(0, 0, 0, 0);
    transition: all 0.3s ease;
  }

  .top {
    top: 0px;
  }

  .down {
    top: -80px;
  }

  .up {
    top: 0px;
  }

  .up,
  .down {
    background: rgba(0, 255, 242, 0.363);
    box-shadow: 0px 0px 5px black;
    padding: 8px;
  }