How to Create a Sticky Header in React

Some website designs make use of a header that “sticks” to the top of the screen as you scroll down. A header that remains visible as you scroll is often called a sticky header.

You can add a sticky header to your React site by writing custom code yourself or by using a third-party library.

A sticky header is a header that remains fixed to the top of the screen as the user scrolls down the page. This can be useful for keeping important information visible as the user scrolls.

Bear in mind, however, that a stick header reduces the amount of screen real estate for your remaining design. If you use a sticky header, it’s a good idea to keep it short.

The first thing you’ll need to do is set up an onscroll handler. This function will run every time the user scrolls. You can do this by adding an onscroll event listener to the window object and by using React hooks. To set up the onscroll handler, you need to use the useEffect hook and the addEventListener method of the window object.

The following code creates a sticky header component and styles it using CSS.

import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default StickyHeader;

This method uses inline styling, but you can also use CSS classes. For example:

.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

The resulting page will look like this:

Additional Features

There are a few other things you can do to make your sticky header more user-friendly. For example, you can add a back-to-top button or make the header transparent when the user scrolls down.

You can use the following code to add a back-to-top button.

import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
setShowBackToTop(true);
} else {
setSticky(false);
setShowBackToTop(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
<div>
{showBackToTop && (
<button onClick={scrollToTop}>Back to top</button>
)}</div>
</div>
);
}
export default StickyHeader;

This code creates a sticky header component and styles it using CSS. You can also style the component using Tailwind CSS.

Alternate Methods

You can also use a third-party library to create a sticky header.

Using react-sticky

The react-sticky library helps you create sticky elements in React. To use react-sticky, first install it:

npm install react-sticky

Then, you can use it like this:

import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
function App() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]return (
<div>
<StickyContainer>
<Sticky>{({ style }) => (
<header style={style}>
This is a sticky header
</header>
)}
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</StickyContainer>
</div>
);
}
export default App;

In the above code, you first need to import the StickyContainer and Sticky components from the react-sticky library.

Then, you need to add the StickyContainer component around the content that should contain the sticky element. In this case, you want to make the header sticky within the list that follows it, so add the StickyContainer around the two.

Next, add the Sticky component around the element that you want to make sticky. In this case, that’s the header element.

Finally, add a style prop to the Sticky component. This will position the header correctly.

Using react-stickynode

React-stickynode is another library that helps you create sticky elements in React.

To use react-stickynode, first install it:

npm install react-stickynode

Then you can use it like this:

import React from 'react';
import Sticky from 'react-stickynode';
function App() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]return (
<div>
<Sticky enabled={true}  bottomBoundary={1200}>
<div>
This is a sticky header
</div>
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default App;

Start by importing the Sticky component from the react-stickynode library.

Then, add the Sticky component around the element that you want to make sticky. In this case, make the header sticky by adding the Sticky component around it.

Finally, add the enabled and bottomBoundary props to the Sticky component. The enabled prop will make sure that the header is sticky, and the bottomBoundary prop will ensure that it doesn’t go too far down the page.

Improve the User Experience

With a sticky header, it can be easy for the user to lose track of where they are on the page. Sticky headers can be especially problematic on mobile devices, where the screen is smaller.

To improve the user experience, you can also add a “back to top” button. Such a button allows the user to quickly scroll back to the top of the page. This can be especially helpful on long pages.

When you’re ready, you can deploy your React app for free on GitHub Pages.