Member-only story
Create a Transitioning Header Using React Hooks (like Medium)
Article Summary: Use React’s useEffect and useState hooks to build a header that hides/shows on scroll.
One small note on setup: I recommend that you use thecreate-react-app boilerplate to scaffold this project. The article assumes that you already have a project structure to work with and does not cover configuration instructions. I also recommend that you read Dan Abramov’s hooks article as a good introduction to why the React team created hooks.
General HTML Structure
Our simple page layout will consist of a <Header /> component and a <Body /> component. The Header will have fixed positioning so that it remains at the top of the viewport, and so that it’s hide/show transitions do not affect the Body component’s positioning:
Build the Header markup
The Header will consist of a main wrapper with typical nav content. The most important part of this markup will be our className variables which will trigger the hide/show transitions (via transform…
