Javascript – How to implement a header show-hide animation depending on the scroll direction in react?

The header should slide up with some animation and be hidden when scrolling down the page. When scrolling up, the header should slide down and be visible.

When scrolling up the style should be translateY(0) otherwise the DOM element should be translateY(-200px).

Here are some of the elements that I needed for the implementation:

• The useEffect hook
• The useRef hook
• Setting up listeners for the scroll eventwindow.addEventListener(‘scroll’, handleScroll)
• Removing listeners for the scroll event:window.removeEventListener(‘scroll’, handleScroll)
• Keeping track of the previous scroll position in a variable

Below is my code, you can also view it here.

App.js

import React, { useEffect, useRef } from "react";
import "./styles.css";
/*import Header from "./components/Header";*/

const Header = () => {
  const navShowHide = useRef(null);

  useEffect(() => {
    const handleScroll = (e) => {
      navShowHide.current;
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <>
      <div
        style={{
          color: "white",
          padding: 20,
          backgroundColor: "green",
        }}
        className="headershow"
        ref={navShowHide}
      >
        <h1>Header</h1>
      </div>
    </>
  );
};

export default function App() {
  return (
    <>
      <Header />
      <div
        className="App"
        style={{
          height: 2000,
        }}
      >
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </>
  );
}

styles.css

.headershow {
  transform: translateY(0);
}

.headerhide {
  transform: translateY(-100%);
}