I have beein trying to achieve the animation of slowly fading in sidebar as you scroll down and fading out slowly as your scroll up with a delay inbetween almost like its responsive to your scroll button. This is my code so far and if anyone could help or point me towards the right direction that would be great. The sidebar functionality I am trying to achieve Sidebar

import React, { useState, useEffect } from "react";

const Navbar = () => {
  const [show, setShow] = useState(false);
  const [lastScrollY, setLastScrollY] = useState(0);

  const controlNavbar = () => {
    if (typeof window !== "undefined") {
      if (window.scrollY < lastScrollY) {
        // if scroll down show the navbar
        setShow(true);
      } else {
        // if scroll up hide the navbar
        setShow(false);
      }

      // 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 (
    <div>
      <nav className={`active ${show && "hidden"}`}>
        <div className="invisible md:visible">
          <aside  aria-label="Sidebar">
            <div >
              <ul >
                <li>
                  <a >
                    <span >Home</span>
                  </a>
                </li>
                <li>
                  <a >
                    <span >Projects</span>
                  </a>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

CodePudding user response：

You have to attach a scroll listener on component mount. This scroll listener is going to increment/decrement the value of a state e.g. scrollY. Then, instead of applying a class to show/hide, you directly adjust the left position of nav. Something like this (Codepen):

#app {
  min-height: 2000px;
  display: flex;
  flex-direction: column;
}

#app > div {
  position: sticky;
  top: 0;
}

nav {
  position: relative;
  top: 0;
  background: gray;
  height: 300px;
  display: flex;
  width: 200px;
  transition: left 0.2s linear;
}

const Navbar = () => {
  const [scrollY, setScrollY] = React.useState(-300);

  const controlNavbar = () => {
    if (typeof window !== "undefined" && window.scrollY < 300){ // This should be the same initial value as scrollY
      setScrollY(scrollY   window.scrollY);
    }
  };

  // On component mount, attach a scroll listener
  React.useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener('scroll', controlNavbar);

      // cleanup function
      return () => {
        window.removeEventListener('scroll', controlNavbar);
      };
    }
  }, []);

  return (
    <div>
      <nav className="active" style={{left: scrollY}}> // <-- Inline change left property
        <div className="invisible md:visible">
          <aside  aria-label="Sidebar">
            <div >
              <ul >
                <li>
                  <a >
                    <span >Home</span>
                  </a>
                </li>
                <li>
                  <a >
                    <span >Projects</span>
                  </a>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </nav>
    </div>
  );
};


ReactDOM.render(<Navbar/>, document.getElementById('app'));