The Startup
Published in

The Startup

React Navbar Transition

Using useState and useEffect to make the Navbar fade out

Photo by KOBU Agency on Unsplash

In this article, we are going to create a navbar with the effect of fading out when the user scroll down more than 100px.




Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

A short intro to the magic of date-fns

Kiss my CSS

An Introduction to TypeScript Property Decorators

JavaScript Basics Quiz to Test Your Knowledge

Object-Oriented JavaScript — Inheritance and Copying Objects

Holy sh*t, React is 7 years old already — JS Guild

Smiley toggle — WotW

Building A Search UI with Angular and Elasticsearch

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Teaching JavasScript, React, React Native, MongoDB and NodeJS

More from Medium

Re-assigning a value to UseParams hook using useState hook.

How to Build an Ecommerce React Template

React Introduction for beginners