Learn how to shrink a header on scroll with CSS and JavaScript

Here’s a solution with code for “Learn how to shrink a header on scroll with CSS and JavaScript” along with the necessary meta title, description, and tags.

HTML, CSS, and JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to shrink a header on scroll using CSS and JavaScript. This tutorial shows how to add dynamic behavior to your webpage's header that changes its size as you scroll.">
  <meta name="keywords" content="shrink header, CSS, JavaScript, scroll effect, header resize, web development, tutorial, dynamic header, scroll event">
  <meta name="author" content="Your Name">
  <title>Learn how to shrink a header on scroll with CSS and JavaScript</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* The header style */
    header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 20px;
      transition: padding 0.3s ease, background-color 0.3s ease;
    }

    /* The body content to simulate scrolling */
    section {
      height: 1500px; /* Added height for scrolling */
      background-color: #f4f4f4;
      padding: 20px;
    }

    /* Shrunk header style */
    header.shrink {
      padding: 10px; /* Reduced padding */
      background-color: #555; /* Darker background on scroll */
    }

    h1 {
      font-size: 36px;
      transition: font-size 0.3s ease;
    }

    header.shrink h1 {
      font-size: 24px; /* Smaller font size when header shrinks */
    }
  </style>
</head>
<body>

<header id="header">
  <h1>My Dynamic Header</h1>
</header>

<section>
  <p>Scroll down to see the effect.</p>
  <!-- More content here -->
</section>

<script>
  // Get the header element
  const header = document.getElementById('header');

  // Listen to the scroll event
  window.addEventListener('scroll', function() {
    if (window.scrollY > 50) {
      header.classList.add('shrink'); // Add the 'shrink' class if scrolled more than 50px
    } else {
      header.classList.remove('shrink'); // Remove the 'shrink' class if less than 50px
    }
  });
</script>

</body>
</html>

Explanation of the Code:

HTML Structure:
- We have a header element at the top of the page with an h1 inside it. This is the header that will shrink when the page is scrolled.
- A section element is added below the header with enough content to make the page scrollable.
CSS Styling:
- header: This is the main header style, which has a background color, padding, and a transition effect. The transition makes the padding and background color change smoothly when the header shrinks.
- .shrink class: This class reduces the padding and changes the background color when the page is scrolled. It also reduces the font size of the h1 element.
- h1: The font size of the h1 element is adjusted when the header shrinks.
- The section element is given a large height (1500px) to simulate scrolling.
JavaScript Functionality:
- The script listens for the scroll event on the window. When the page is scrolled down by more than 50 pixels (window.scrollY > 50), the shrink class is added to the header. If the scroll position is less than 50 pixels, the shrink class is removed.
- The shrink class reduces the padding and changes the background color of the header, giving it a “shrinking” effect.

Learn how to shrink a header on scroll with CSS and JavaScript

HTML, CSS, and JavaScript Code:

Explanation of the Code:

Leave a Reply Cancel reply