How to Create Sticky Fixed Header on Scroll with ReactJS?

How to Create Sticky Fixed Header on Scroll with ReactJS?

Hello friends, in this tutorial you will learn how you can create a sticky header on a scroll event with reactjs that will be fixed to the top of the window.

In the fixed top header, you can contain the navbar, logo, search box, and social media icons. You can take anything that you want to make a fixed position of them when scrolling the webpage.

We will use the react hooks of functional components to compare the offset of elements and a page to implement the sticky fixed header in an application.

Let’s get started.

Sticky Fixed Header with ReactJS

First of all, you must have a proper working installation of react application and have knowledge of react hooks.

We are going to use useLayoutEffect and useRef react hooks to create a fixed sticky header in our reactjs application.

The useLayoutEffect hook is similar to the useEffect hook but the difference is that the useLayoutEffect hook fires synchronously when all DOM elements render.

The useRef hook is used to access a DOM element directly. It can store the mutable value to prevent the re-render when updating the state.

Let’s see step by step to create a sticky fixed header on a scroll event with reactjs.

Create React Application

To create a react application you can use the following command in your terminal. You can skip this step if you already have installed it.

After installation go to the root folder of the application by cd react-application command and open this project in your favorite editor.

Create Header Component

Now let’s create a new component called “Header.js” inside the components folder. The path of the component looks like src/components/Header.js.

Import the useLayoutEffect and useRef hooks from react component. Then make a life cycle method with react hook useLayoutEffect to fire the custom scroll event to add or remove the class to an element.

Just add the following code to your “Header.js” component file and save it.

In this above code, first, we make the reference of an element using the useRef which we want to make sticky.

Then we target the header element by id and get the top offset position of the reference element. Then we made a custom event listener to add/remove the class by comparing the window offset position and that element offset position. In the last line of function, we fire the window scroll event to trigger that custom event.

Add Header Style

In the above code, we have implemented the sticky fixed header on the scroll event with reactjs. And we have triggered the event to add or remove the ‘sticky-header’ class to an element. So let’s now add the style for it.

To add CSS style to an element, you can create a new .css file and then import it or you can also use the default App.css or index.css file.

There is one other way to add style to an element you can use the inline style to add CSS.

Import Header Component

We have successfully created the sticky header component, now let’s import it. We are going to import it in the “App.js” file but you can import it according to your application layout structure.

To import in the App.js file, open the src/App.js file and import the Header.js file from relative path. See the following App.js file example code.

That’s it!!!

Run Application

Now run the application using the following command and you can see the sticky fixed header in your react application. You can also check the following sandbox code how we create the sticky fixed header on scroll event with reactjs.

Hope it is helpful to you, please also share with others and if you have any queries please do let me know in the comment section, and I will respond to you as soon as possible.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *