我正在尝试做一个React网站（第一次所以原谅我，如果我犯了愚蠢的错误，错过了一些明显的）。我的导航栏目前固定在我的页面顶部，它有一些基本的动画悬停。我希望它消失时向下滚动和重新出现时向上滚动。像在这个youtube视频教程https://www.youtube.com/watch?v=RYUuGgC_IY0
这是我当前的Javascript

import React from 'react';
import './Header.css';

const body = document.body;
let lastScroll = 0;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= 0) {
    body.classList.remove("scroll-up");
  }
  if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
    body.classList.remove("scroll-up");
    body.classList.add("scroll-down");
  }
  if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
    body.classList.remove("scroll-down");
    body.classList.add("scroll-up");
  }
  lastScroll = currentScroll;
});
const Header = () => {
  return (
    <header className="header">
      <div className="logo-container">
        <a href="https://github.com/avarga1"><i className="fab fa-github"></i></a>
        <a href="https://www.linkedin.com/in/austin-varga-2611b9259/"><i className="fab fa-linkedin"></i></a>
        <a href="#home"><i className="fab fa-youtube"></i></a>
        <a href="https://twitter.com/"><i className="fab fa-twitter"></i></a>
      </div>
       <nav>
        <ul>
          <li><a href="#home" className="nav-link">Home</a></li>
          <li><a href="#home" className="nav-link">About</a></li>
          <li><a href="#home" className="nav-link">Projects</a></li>
          <li><a href="#home" className="nav-link">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

这是我的CSS

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(85, 85, 85);
  opacity: 0.85;
  color: white;
  font-size: 24px;
  position: fixed;
  top: 0;
  z-index: 9999;
 width: 100%;
}

.header .logo-container {
  display: flex;
 }

.header .logo-container a {
  display: inline-block;
  margin-right: 10px;  
}

.header .logo-container a i {
  font-size: 50px;
  color: rgb(255, 255, 255);
  padding: 10px;  
}

.header .logo-container a i:hover {
  transform: scale(1.5);
}

.header .username {
  margin-right: 20px;
}

.header nav ul {
  display: flex;
}

.header nav ul li {
  list-style: none;
  margin-left: 20px;
}

.header nav ul li a.nav-link {
  padding-right: 40px;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  color: white;
  text-decoration: none;
}

.header nav ul li a.nav-link:hover {
  color: rgb(30, 255, 10);
  font-weight: bold;
  transform: scale(1.5) !important;
}

.header .logo-container a i.fab.fa-linkedin:hover {
  color: rgb(0, 123, 181);
}
.header .logo-container a i.fab.fa-twitter:hover {
  color: rgb(29, 161, 242);
}

.header .logo-container a i.fab.fa-github:hover {
  color: black;
}

.header .logo-container a i.fab.fa-youtube:hover {
  color: rgb(203, 32, 39);
}

/*   Scroll      */
.scroll-down header {
  transform: translate3d(0, -100%, 0);
}

.scroll-up header {
  transform: translate3d(0, 0, 0);
}

这也是我的react App.js文件

import React from 'react';
import './App.css';
import Header from './Header.js';
import Contact from './Contact.js';
import Landing from './Landing.js';
import Sidebar from './Sidebar.js';
import Main from './Main.jsx';

function App() {
  return (
    <div>  
        <Header/>
        <Main />
        <Sidebar />
        <Landing />
        <Contact />
    </div>
  );
}

export default App;

我似乎不能让它按预期的方式行事，任何见解都将不胜感激！