When you create sticky header or sticky UI components, probably you can think to use pure css solution.

1.sticky { position: sticky; top: 0;}

🤔 The issue for pure Css solution is that it is not supported by all browsers e.g. IE, Edge. It is fine if you are building enterprise applications which is not required to support most browsers.

Now React Hooks is the most popular way to implement React Application instead of React Class. In this way, I will show you how to develop a sticky component with React Hooks.

💡Solution

We will create a Sticky component with Typescript.

Let also check the css codes.

🎉How to use it

1import Sticky from ‘./Sticky’

1<Sticky top={60}><Header /></Sticky>