Attempting to create a React site for the first time, so please forgive any novice mistakes or oversights on my part. Currently, my navigation bar is fixed at the top of the page with basic hover animations. I am aiming for it to disappear when scrolling down and reappear when scrolling up, similar to the effect demonstrated in this YouTube tutorial here.
Below is the current JavaScript code:
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;
Here's the accompanying 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%;
}
... // rest of CSS properties
/* Scroll */
.scroll-down header {
transform: translate3d(0, -100%, 0);
}
.scroll-up header {
transform: translate3d(0, 0, 0);
}
Additionally, here's the App.js file:
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;
If anyone has insight on how to achieve the desired behavior, it would be greatly appreciated!