DEV Community

Cover image for Animate and Change Header Background on Scroll
Avneesh Agarwal
Avneesh Agarwal

Posted on • Edited on • Originally published at blog.avneesh.tech

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.

Demo

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

Setup

Create a new react app 

npx create-react-app animated-header
Enter fullscreen mode Exit fullscreen mode

Cleanup

  • Delete everything in the app div in App.js. 
import "./App.css";

function App() {
  return <div className="app"></div>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Delete everything in App.css and add this basic styling- 
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode
  • in index.css add- 
* {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Creating the navbar

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

I am creating a very simple navbar-

import "./Header.css";

const Header = () => {
  return (
    <nav className="header">
      <h3>I am a nav</h3>
    </nav>
  );
};

export default Header;
Enter fullscreen mode Exit fullscreen mode

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.

.header {
  padding: 20px 0px;
  background-color: #282c34;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100vw;
}

.header > h3 {
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

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

import "./App.css";
import Header from "./Header";

function App() {
  return (
    <div className="app">
      <Header />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

image.png

Adding dummy section

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

import "./App.css";
import Header from "./Header";

function App() {
  return (
    <div className="app">
      <Header />
      <div className="landing_page">
        <h2>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
          nisi qui iste quos placeat sint explicabo labore. Vero quaerat odio
          reprehenderit, id laborum placeat harum fugit? Explicabo dolorem
          obcaecati nostrum.Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Architecto nisi qui iste quos placeat sint explicabo labore.
          Vero quaerat odio reprehenderit, id laborum placeat harum fugit?
          Explicabo dolorem obcaecati nostrum.Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Architecto nisi qui iste quos placeat
          sint explicabo labore. Vero quaerat odio reprehenderit, id laborum
          placeat harum fugit? Explicabo dolorem obcaecati nostrum.
        </h2>
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

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

image.png

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

.landing_page {
  display: flex;
  flex-direction: column;
  padding-top: 40vh;
  height: 100vh;
  width: 100vw;
  background-color: aqua;
}

.landing_page > h2 {
  margin: 0 auto;
  width: 80vw;
}
Enter fullscreen mode Exit fullscreen mode

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

image.png

Adding additional class based on scroll

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

const [animateHeader, setAnimateHeader] = useState(false);
Enter fullscreen mode Exit fullscreen mode

Setting the state based on scroll-

  useEffect(() => {
    const listener = () => {
      if (window.scrollY > 140) {
        setAnimateHeader(true);
      } else setAnimateHeader(false);
    };
    window.addEventListener("scroll", listener);

    return () => {
      window.removeEventListener("scroll", listener);
    };
  }, []);
Enter fullscreen mode Exit fullscreen mode

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

Styling the animated header 

.header--animated {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  box-shadow: rgba(255, 255, 255, 0.3);
}

.header--animated > h3 {
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

This will give you a glassmorphic background on scrolling.

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

.header--animated {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  box-shadow: rgba(255, 255, 255, 0.3);
  padding: 25px 0px;
}
Enter fullscreen mode Exit fullscreen mode

Make the animation smoother

In .header I will add one more property-

transition: all 0.1s;
Enter fullscreen mode Exit fullscreen mode

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

Useful links

GitHub repo

Let's connect

Top comments (0)

Read next

udanielnogueira profile image

Criando uma Estrutura de HTML Semântico

Daniel Nogueira -

ayaarragab profile image

Ever save a LinkedIn post thinking, “I’ll get back to this later,” but totally forget?

Aya Ragab -

codeplato profile image

How to write elegant code 1: Keep the chain of event calls short

code plato -

alexandrecalaca profile image

MBA em Desenvolvimento de Software Avançado com foco em Ruby on Rails

Alexandre Calaça -