Animate and Change Header Background on Scroll

You might have seen some web apps where the header changes its color or becomes glassmorphic when you scroll down. So in this tutorial, I am going to show you how you can do the same. Let's jump right into it.

https://www.loom.com/share/432917e923304aa5807ef6a6228a38b9

Delete everything in the app div in App.js.

Delete everything in App.css and add this basic styling-

Create a new file Header.js in the src folder.

I am creating a very simple navbar-

Now we need to create a Header.css file for our stylings. I am going to add very basic stylings, feel free to style it more as per your app.

Render the Header In App.js add the header and import it-

In App.js I am going to add a dummy section with some text, to see the navbar properly.

This will give us some text below our navbar like this-

Now let's add some stylings to the h2 tag and the landing page div

This styles will center the text and give it an aqua background with a y-axis scroll as it is more than 100vh.

Create a state to hold if we need to change the background or not.

Setting the state based on scroll-

You might need to change the value for scrollY based on your app needs.

This will give you a glassmorphic background on scrolling.

I am also going to increase the padding a bit in the animated header-

Make the animation smoother In .header I will add one more property-

I hope you could also make your header beautiful and better like this. See ya in the next one ✌️