Animated sticky header on scroll in React

by Clue Mediator · May 7, 2020

Today we’ll show you how to create an animated sticky header on scroll in React JS without plugin. While you are working with react applications, it’s good practice to do not manipulate the real dom by injecting the JavaScript but we can manage it in a different way by using Refs. So the same concept we will use in this demo.

Building a sticky header component in React, Build a sticky navigation bar with React, Simple sticky/fixed header that animates on scroll, React Sticky Header Elements Component on Scroll in React, Building an animated sticky header with custom offset, How I linked animated headers to scroll position in React, react-sticky navbar on scroll, bootstrap sticky header on scroll.

Checkout more articles on ReactJS

In a previous article we have explained how to create sticky header on page scroll in JavaScript where we wrote a custom script to stick a header. Now in this article we will use useRef & useEffect to manage the sticky header using React Hooks. Let’s take an example.

Steps to create an animated sticky header on scroll

Create a sample website in React
Implement react code for sticky header
Output

1. Create a sample website in React

Let’s set up a simple react application using create-react-app and create a sample website by adding the below HTML and CSS in app.

app.js

import React from 'react';

function App() {
  return (
    <div className="App">
      <div className="header">
        <h1>Sticky Header Website</h1>
        <p>A website created in HTML</p>
      </div>

      <div id="sticky-header" className="navbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#" className="right">Login</a>
      </div>

      <div className="row">
        <div className="main">
          <h2>Lorem ipsum dolor sit amet</h2>
          <h5>Arcu dui vivamus arcu felis bibendum</h5>
          <img className="fakeimg" src="/images/img-1.jpg" />
          <p>Excepteur sint occaecat</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce. Mauris pellentesque pulvinar pellentesque
          habitant morbi. Libero id faucibus nisl tincidunt eget nullam non. Rhoncus aenean vel elit scelerisque mauris
        pellentesque pulvinar pellentesque habitant.</p>
          <br />
          <h2>Vivamus arcu felis</h2>
          <h5>Tellus mauris a diam maecenas sed enim</h5>
          <img className="fakeimg" src="/images/img-2.jpg" />
          <p>Ultrices tincidunt</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Augue interdum velit euismod in pellentesque. Vivamus arcu felis bibendum ut tristique et.
        Tincidunt tortor aliquam nulla facilisi cras.</p>
          <br />
          <h2>Purus semper eget duis at tellus at urna</h2>
          <h5>Fermentum leo vel orci porta</h5>
          <img className="fakeimg" src="/images/img-3.jpg" />
          <p>Tristique nulla aliquet</p>
          <p>Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Dapibus ultrices in iaculis nunc sed augue.
        Senectus et netus et malesuada fames ac turpis.</p>
          <br />
          <h2>Fermentum dui faucibus in ornare quam</h2>
          <h5>Viverra nibh cras pulvinar</h5>
          <img className="fakeimg" src="/images/img-4.jpg" />
          <p>Scelerisque mauris pellentesque</p>
          <p>Scelerisque pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Tempor orci eu
        lobortis elementum nibh tellus molestie nunc.</p>
        </div>
        <div className="side">
          <h2>Eget mi proin</h2>
          <h5>Sed libero enim:</h5>
          <img className="fakeimg" src="/images/s-img-1.jpg" />
          <p>Massa tincidunt dui ut ornare lectus sit amet est.</p>
          <h3>Mi ipsum faucibus</h3>
          <p>Lorem ipsum dolor sit ame.</p>
          <img className="fakeimg" src="/images/s-img-2.jpg" />
          <h3>Malesuada fames</h3>
          <p>In nisl nisi scelerisque eu ultrices.</p>
          <img className="fakeimg" src="/images/s-img-3.jpg" />
        </div>
      </div>

      <div className="footer">
        <h2>Footer</h2>
      </div>
    </div>
  );
}

export default App;

import React from 'react';

function App() {

return (

<h1>Sticky Header Website</h1>

<p>A website created in HTML</p>

</div>

<a href="#">About</a>

<a href="#">Contact</a>

<a href="#" className="right">Login</a>

</div>

<h2>Lorem ipsum dolor sit amet</h2>

<h5>Arcu dui vivamus arcu felis bibendum</h5>

<p>Excepteur sint occaecat</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce. Mauris pellentesque pulvinar pellentesque

habitant morbi. Libero id faucibus nisl tincidunt eget nullam non. Rhoncus aenean vel elit scelerisque mauris

pellentesque pulvinar pellentesque habitant.</p>

<br />

<h2>Vivamus arcu felis</h2>

<h5>Tellus mauris a diam maecenas sed enim</h5>

<p>Ultrices tincidunt</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua. Augue interdum velit euismod in pellentesque. Vivamus arcu felis bibendum ut tristique et.

Tincidunt tortor aliquam nulla facilisi cras.</p>

<br />

<h2>Purus semper eget duis at tellus at urna</h2>

<h5>Fermentum leo vel orci porta</h5>

<p>Tristique nulla aliquet</p>

<p>Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Dapibus ultrices in iaculis nunc sed augue.

Senectus et netus et malesuada fames ac turpis.</p>

<br />

<h2>Fermentum dui faucibus in ornare quam</h2>

<h5>Viverra nibh cras pulvinar</h5>

<p>Scelerisque mauris pellentesque</p>

<p>Scelerisque pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Tempor orci eu

lobortis elementum nibh tellus molestie nunc.</p>

</div>

<h2>Eget mi proin</h2>

<h5>Sed libero enim:</h5>

<p>Massa tincidunt dui ut ornare lectus sit amet est.</p>

<h3>Mi ipsum faucibus</h3>

<p>Lorem ipsum dolor sit ame.</p>

<h3>Malesuada fames</h3>

<p>In nisl nisi scelerisque eu ultrices.</p>

</div>

<h2>Footer</h2>

</div>

);

}

export default App;

index.css

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.header {
  padding: 80px;
  text-align: center;
  color: white;
  background-image: url("/images/head-img.jpg");
  background-size: cover;
}

.header h1 {
  font-size: 40px;
}

.navbar {
  overflow: hidden;
  background: #269faf;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar a.right {
  float: right;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.row {
  display: -ms-flexbox;
  display: flex;
}

.side {
  -ms-flex: 30%;
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

.main {
  -ms-flex: 70%;
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.fakeimg {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 4px;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 0.5s ease;
  animation: smoothScroll 1s forwards;
}

@keyframes smoothScroll {
  0% {
    transform: translateY(-142px);
  }

  100% {
    transform: translateY(0px);
  }
}

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

.header {

padding: 80px;

text-align: center;

color: white;

background-image: url("/images/head-img.jpg");

background-size: cover;

}

.header h1 {

font-size: 40px;

}

.navbar {

overflow: hidden;

background: #269faf;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.navbar a.right {

float: right;

}

.navbar a:hover {

background-color: #ddd;

color: black;

}

.row {

display: -ms-flexbox;

display: flex;

}

.side {

-ms-flex: 30%;

flex: 30%;

background-color: #f1f1f1;

padding: 20px;

}

.main {

-ms-flex: 70%;

flex: 70%;

background-color: white;

padding: 20px;

}

.fakeimg {

width: 100%;

max-height: 300px;

object-fit: cover;

border-radius: 4px;

}

.footer {

padding: 20px;

text-align: center;

background: #ddd;

}

.sticky {

position: fixed;

top: 0;

width: 100%;

transition: all 0.5s ease;

animation: smoothScroll 1s forwards;

}

@keyframes smoothScroll {

0% {

transform: translateY(-142px);

}

100% {

transform: translateY(0px);

}

2. Implement react code for sticky header

Now we will initialize the state object and header reference. State objects will have two variables, the one used to enable the sticky header and the other used to set the margin of the component when we fix the header. Header reference will be used to access the real dom node. Check the following code.

const [sticky, setSticky] = useState({ isSticky: false, offset: 0 });
const headerRef = useRef(null);

1 2	const [sticky, setSticky] = useState({ isSticky: false, offset: 0 }); const headerRef = useRef(null);

Let’s create a scroll event handler that will be used to observe the window scroll position and compare it with header top offset and height.

// handle scroll event
const handleScroll = (elTopOffset, elHeight) => {
  if (window.pageYOffset > (elTopOffset + elHeight)) {
    setSticky({ isSticky: true, offset: elHeight });
  } else {
    setSticky({ isSticky: false, offset: 0 });
  }
};

// handle scroll event

const handleScroll = (elTopOffset, elHeight) => {

if (window.pageYOffset > (elTopOffset + elHeight)) {

setSticky({ isSticky: true, offset: elHeight });

} else {

setSticky({ isSticky: false, offset: 0 });

}

};

Use the above function to add on scroll event listeners. Also we have to remove it when the component will unmount.

// add/remove scroll event listener
useEffect(() => {
  var header = headerRef.current.getBoundingClientRect();
  const handleScrollEvent = () => {
    handleScroll(header.top, header.height)
  }

  window.addEventListener('scroll', handleScrollEvent);

  return () => {
    window.removeEventListener('scroll', handleScrollEvent);
  };
}, []);

// add/remove scroll event listener

useEffect(() => {

var header = headerRef.current.getBoundingClientRect();

const handleScrollEvent = () => {

handleScroll(header.top, header.height)

}

window.addEventListener('scroll', handleScrollEvent);

return () => {

window.removeEventListener('scroll', handleScrollEvent);

};

}, []);

In the above function, we have created one more function to pass in the event listener because otherwise it will not be removed on unmount.

Finally let’s use headerRef and offset to complete the example.

return (
  <div className="App" style={{ marginTop: sticky.offset }}>
    . . .
    . . .
    <div id="sticky-header" className={`navbar${sticky.isSticky ? ' sticky' : ''}`} ref={headerRef}>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#" className="right">Login</a>
    </div>
    . . .
    . . .
  </div>
);

return (

. . .

<a href="#">About</a>

<a href="#">Contact</a>

<a href="#" className="right">Login</a>

</div>

. . .

</div>

);

3. Output

Let’s combine all code together and see the output.

app.js

import React, { useState, useRef, useEffect } from 'react';

function App() {
  const [sticky, setSticky] = useState({ isSticky: false, offset: 0 });
  const headerRef = useRef(null);

  // handle scroll event
  const handleScroll = (elTopOffset, elHeight) => {
    if (window.pageYOffset > (elTopOffset + elHeight)) {
      setSticky({ isSticky: true, offset: elHeight });
    } else {
      setSticky({ isSticky: false, offset: 0 });
    }
  };

  // add/remove scroll event listener
  useEffect(() => {
    var header = headerRef.current.getBoundingClientRect();
    const handleScrollEvent = () => {
      handleScroll(header.top, header.height)
    }

    window.addEventListener('scroll', handleScrollEvent);

    return () => {
      window.removeEventListener('scroll', handleScrollEvent);
    };
  }, []);

  return (
    <div className="App" style={{ marginTop: sticky.offset }}>
      <div className="header">
        <h1>Sticky Header Website</h1>
        <p>A website created in HTML</p>
      </div>

      <div id="sticky-header" className={`navbar${sticky.isSticky ? ' sticky' : ''}`} ref={headerRef}>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#" className="right">Login</a>
      </div>

      <div className="row">
        <div className="main">
          <h2>Lorem ipsum dolor sit amet</h2>
          <h5>Arcu dui vivamus arcu felis bibendum</h5>
          <img className="fakeimg" src="/images/img-1.jpg" />
          <p>Excepteur sint occaecat</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce. Mauris pellentesque pulvinar pellentesque
          habitant morbi. Libero id faucibus nisl tincidunt eget nullam non. Rhoncus aenean vel elit scelerisque mauris
        pellentesque pulvinar pellentesque habitant.</p>
          <br />
          <h2>Vivamus arcu felis</h2>
          <h5>Tellus mauris a diam maecenas sed enim</h5>
          <img className="fakeimg" src="/images/img-2.jpg" />
          <p>Ultrices tincidunt</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Augue interdum velit euismod in pellentesque. Vivamus arcu felis bibendum ut tristique et.
        Tincidunt tortor aliquam nulla facilisi cras.</p>
          <br />
          <h2>Purus semper eget duis at tellus at urna</h2>
          <h5>Fermentum leo vel orci porta</h5>
          <img className="fakeimg" src="/images/img-3.jpg" />
          <p>Tristique nulla aliquet</p>
          <p>Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Dapibus ultrices in iaculis nunc sed augue.
        Senectus et netus et malesuada fames ac turpis.</p>
          <br />
          <h2>Fermentum dui faucibus in ornare quam</h2>
          <h5>Viverra nibh cras pulvinar</h5>
          <img className="fakeimg" src="/images/img-4.jpg" />
          <p>Scelerisque mauris pellentesque</p>
          <p>Scelerisque pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Tempor orci eu
        lobortis elementum nibh tellus molestie nunc.</p>
        </div>
        <div className="side">
          <h2>Eget mi proin</h2>
          <h5>Sed libero enim:</h5>
          <img className="fakeimg" src="/images/s-img-1.jpg" />
          <p>Massa tincidunt dui ut ornare lectus sit amet est.</p>
          <h3>Mi ipsum faucibus</h3>
          <p>Lorem ipsum dolor sit ame.</p>
          <img className="fakeimg" src="/images/s-img-2.jpg" />
          <h3>Malesuada fames</h3>
          <p>In nisl nisi scelerisque eu ultrices.</p>
          <img className="fakeimg" src="/images/s-img-3.jpg" />
        </div>
      </div>

      <div className="footer">
        <h2>Footer</h2>
      </div>
    </div>
  );
}

export default App;

import React, { useState, useRef, useEffect } from 'react';

function App() {

const [sticky, setSticky] = useState({ isSticky: false, offset: 0 });

const headerRef = useRef(null);

// handle scroll event

const handleScroll = (elTopOffset, elHeight) => {

if (window.pageYOffset > (elTopOffset + elHeight)) {

setSticky({ isSticky: true, offset: elHeight });

} else {

setSticky({ isSticky: false, offset: 0 });

}

};

// add/remove scroll event listener

useEffect(() => {

var header = headerRef.current.getBoundingClientRect();

const handleScrollEvent = () => {

handleScroll(header.top, header.height)

}

window.addEventListener('scroll', handleScrollEvent);

return () => {

window.removeEventListener('scroll', handleScrollEvent);

};

}, []);

return (

<h1>Sticky Header Website</h1>

<p>A website created in HTML</p>

</div>

<a href="#">About</a>

<a href="#">Contact</a>

<a href="#" className="right">Login</a>

</div>

<h2>Lorem ipsum dolor sit amet</h2>

<h5>Arcu dui vivamus arcu felis bibendum</h5>

<p>Excepteur sint occaecat</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce. Mauris pellentesque pulvinar pellentesque

habitant morbi. Libero id faucibus nisl tincidunt eget nullam non. Rhoncus aenean vel elit scelerisque mauris

pellentesque pulvinar pellentesque habitant.</p>

<br />

<h2>Vivamus arcu felis</h2>

<h5>Tellus mauris a diam maecenas sed enim</h5>

<p>Ultrices tincidunt</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua. Augue interdum velit euismod in pellentesque. Vivamus arcu felis bibendum ut tristique et.

Tincidunt tortor aliquam nulla facilisi cras.</p>

<br />

<h2>Purus semper eget duis at tellus at urna</h2>

<h5>Fermentum leo vel orci porta</h5>

<p>Tristique nulla aliquet</p>

<p>Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Dapibus ultrices in iaculis nunc sed augue.

Senectus et netus et malesuada fames ac turpis.</p>

<br />

<h2>Fermentum dui faucibus in ornare quam</h2>

<h5>Viverra nibh cras pulvinar</h5>

<p>Scelerisque mauris pellentesque</p>

<p>Scelerisque pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Tempor orci eu

lobortis elementum nibh tellus molestie nunc.</p>

</div>

<h2>Eget mi proin</h2>

<h5>Sed libero enim:</h5>

<p>Massa tincidunt dui ut ornare lectus sit amet est.</p>

<h3>Mi ipsum faucibus</h3>

<p>Lorem ipsum dolor sit ame.</p>

<h3>Malesuada fames</h3>

<p>In nisl nisi scelerisque eu ultrices.</p>

</div>

<h2>Footer</h2>

</div>

);

}

export default App;

Output - Animated sticky header on scroll in React - Clue Mediator — Output – Animated sticky header on scroll in React – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

Tags: Animation React Example React Hooks Scroll

Cesar says:
January 12, 2021 at 2:09 pm
Hi, thanks for your sharing! I have a question for you, hope you can help me.
I’d like to use style={{ marginTop: sticky.offset }} on another file.
I would like to use it on layout.js file inside the [main [here]] tags:
====================================
HEADER.JS
import Nav from ‘./nav’
import React, { useState, useRef, useEffect } from ‘react’
export default function Header() {
// [ Here your code ]
return (
[header className={“py-5 px-4″ + (sticky.isSticky ? ” sticky” : “”)} ref={headerRef}]
[div className=”max-w-screen-xl mx-auto”]
[Nav /]
[/div]
[/header]
);
}
====================================
LAYOUT.JS
import Head from ‘next/head’
import Footer from ‘./footer’
import Header from ‘./header’
export default function Layout({ children }) {
return (
[]
[Head]
[link rel=”icon” href=”/favicon.svg” /]
[/Head]
[Header /]
[main style={{ marginTop: sticky.offset }}]{children}[/main]
[Footer /]
[/]
);
}
====================================
How could I do? Thanks in advance.
Regards,
Cesar
Reply
- Clue Mediator says:
  January 13, 2021 at 6:11 am
  You can pass the sticky object using redux or parent-child or child-parent communication.
  Reference:
  How to implement redux in React.js
  How to pass data from Child component to Parent component in React
  How to pass data from Parent component to Child component in React
  Reply
  - Cesar says:
    January 20, 2021 at 7:19 am
    Thank you so much!
    I use Next.js and I solved changing “position: fixed;” to “position: sticky;” and removing “style={{ marginTop: sticky.offset }}”. I know that sticky isn’t supported by all browsers but for now is the simplest solution. I did well? Or should I remove more?
    Thanks,
    Regards
    Reply
    - Clue Mediator says:
      January 21, 2021 at 3:04 am
      Good
      Reply
PauloSR says:
September 30, 2023 at 7:50 pm
Hello, does it possible make the navbar with responsive hamburger menu?
Reply
- Clue Mediator says:
  October 3, 2023 at 3:04 pm
  Do you want like this: https://www.cluemediator.com/how-to-toggle-the-sidebar-with-an-icon-in-react
  Reply

Animated sticky header on scroll in React

Steps to create an animated sticky header on scroll

1. Create a sample website in React

2. Implement react code for sticky header

3. Output

Demo & Source Code

You may also like...

6 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Animated sticky header on scroll in React

Steps to create an animated sticky header on scroll

1. Create a sample website in React

2. Implement react code for sticky header

3. Output

Demo & Source Code

You may also like...

[Solved] Uncaught Invariant Violation: Rendered more hooks than during the previous render

How to pass data from Child component to Parent component in React

How to upload images to Cloudinary using the REST API

Implement server side pagination in React AG Grid

How to export multiple functions from a React hook

Color picker in React using react-color

6 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us