Hello World! Let me show you how we can create a header that shrinks when we scroll down and expands when we scroll back to the top in . React Steps to achieve the goal Listen to the page scroll. When scrolled beyond a point, shrink the header. When scrolling back to the top, reset the header to normal. Add some transition to make the grow/shrink smooth Implementation Listening to page scroll We can listen to the scroll using the event listeners. We will have to start listening to the scroll when the component mounts and will have to stop listening when the component unmounts. For this, we can make use of the hooks. useEffect useEffect(() => {
    // Adding the scroll listener
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        // Removing listener
        window.removeEventListener('scroll', handleScroll);
    };
}, []); is used to denote that an event is a passive event and the handler won't call the to disable scrolling. passive preventDefault Handler implementation To know whether the page is scrolled or not, we can use a flag called . The is to be set to , when the screen is scrolled beyond a point (250, for example) and set to when scrolled back to the top (when the scroll position is less than 250). We can track the scroll position with . isScrolled isScrolled true false window.pageYOffset So the handler function would be: // Flag, which stores whether the screen is scrolled
const [isScrolled, setScrolled] = useState(false);

// Handler when page is scrolled
const handleScroll = () => {
  if(window.pageYOffset > 250) {
    setScrolled(true)
  } else {
    setScrolled(false)
  }
} Component Implementation Now, we can sense whether the page is scrolled or not using the flag. Now we can implement the header component markup like: isScrolled return (
    <div className={`header-container ${isScrolled && 'header-scrolled'}`}>
      <h1>SR</h1>
      <h2>Sriram</h2>
    </div>
  ); Here, we are injecting the class when the screen is scrolled. That is when the is true. header-scrolled isScrolled Let us see the styling of the component: .header-container {
  display: flex;
  align-items: center;
  background: $header-color;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  height: 7rem;
}
.header-scrolled {
  height: 3rem;
} Here in the class, the height is set to . When the page is scrolled and class is injected, the height would be replaced with , which would shrink the header vertically. header-container 7rem header-scrolled 3rem But the grow/shrink transition would be sharp now. We can add some in the CSS to make the grow/shrink smooth. transition .header-container {
  display: flex;
  align-items: center;
  background: $header-color;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  height: 7rem;
  // To make the grow/shrink smooth.
  transition: height 2s;
} That's it, we are done! Now, when we scroll the screen, the header will grow and shrink smoothly. The final code would be: import React, { useEffect, useState } from "react";
import "./header.scss";

export default function Header() {
  const [isScrolled, setScrolled] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);
const handleScroll = () => {
  if(window.pageYOffset > 250) {
    setScrolled(true)
  } else {
    setScrolled(false)
  }
}
  return (
    <div className={`header-container ${isScrolled && 'header-scrolled'}`}>
      <h1>SR</h1>
      <h2>Sriram</h2>
    </div>
  );
}


.header-container {
  display: flex;
  align-items: center;
  background: $header-color;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  height: 7rem;
  transition: height 2s;
}
.header-scrolled {
  height: 3rem;
} Hope this is helpful to you. I am looking forward to your feedback; thank you! Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Master Git With 15 Essential Commands Every Developer Should Know

Resolving React's 'Unable to Type in Input' Issue

Read My Stories

Creating a Dynamic Header in React: Shrink on Scroll, Expand on Top

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Beginner's Guide to GIT: Chapter 1

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

A Beginner's Guide to GIT: Chapter 1

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps