How to make a sticky Navbar that hides on scroll (React/Hooks)
This post will show you how to make a Navbar that "hides" by sliding up and off the page when the user starts to scroll down - the Navbar then glides down and back into view when the user scrolls back up toward the top of the page. I will be using React with Hooks.
This is a very common effect used for Navbars - especially on news sites and blogs that have a lot of readable content. Giving the user space to read is crucial if you want them to enjoy spending time on your site.
This is very bare-bones - just a grey navbar with a company title in the center. In a real project there would be links added and more styling, but I am keeping it simple so we can stay on topic.
I am using objects to spread inline styles to keep the styling all in one file. Feel free to used styled components, or any other preferred styling options.
Side note: when coding in React I prefer to keep my styles inside my Javascript files right next to my components because I like having everything visible and all in one place - I also think it makes conditional styling easier (which we will be doing here shortly).
