SheepstarStudio/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The navigation now moves to the top on scroll

Browse Source
This commit is contained in:
Mathias Wagner 2022-09-30 22:16:06 +02:00
parent 5e8f17a254
commit 8d28f5f905
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/common/components/Navigation/Navigation.jsx
View File

@ -2,6 +2,7 @@ import "./styles.sass";
import Button from "@/common/components/Button";
import SheepstarSitting from "@/assets/SheepstarSitting.png";
import {Link, NavLink} from "react-router-dom";
import {useEffect, useState} from "react";
const links = [
{name: "Home", to: "/"},
@ -12,8 +13,22 @@ const links = [
];
const Navigation = () => {
const [hide, setHidden] = useState(false);
const [lastScrollY, setLastScrollY] = useState(0);
const scrollHandler = () => {
setHidden(window.scrollY > lastScrollY);
setLastScrollY(window.scrollY);
}
useEffect(() => {
window.addEventListener('scroll', scrollHandler);
return () => window.removeEventListener('scroll', scrollHandler);
}, [lastScrollY]);
return (
<header className="header">
<header className={`header${hide ? ' hidden' : ''}`}>
<div className="link-area">
<Link to={"/"}><img className="logo" src={SheepstarSitting} alt="Sheepstar Logo"/></Link>