{"id":20189,"date":"2025-10-10T13:35:13","date_gmt":"2025-10-10T08:05:13","guid":{"rendered":"https:\/\/vinish.dev\/?p=20189"},"modified":"2025-10-12T21:04:27","modified_gmt":"2025-10-12T15:34:27","slug":"sticky-header-changes-on-scroll","status":"publish","type":"post","link":"https:\/\/vinish.dev\/sticky-header-changes-on-scroll","title":{"rendered":"How to Create a Sticky Header That Changes on Scroll"},"content":{"rendered":"\n

A sticky header can make your site feel faster and easier to navigate, since your logo and menu stay within reach as you scroll. I will show you how to create a sticky header that changes on scroll, first with a quick example, then with a complete, responsive<\/a> version. I will explain every step in plain language, so even if you are new to CSS and JavaScript, you can follow along and test it on your own.<\/p>\n\n\n\n

What a \u201csticky header\u201d is, and why it should change on scroll<\/h2>\n\n\n\n

A sticky header is a top bar that sticks to the top of the page as you scroll down. In CSS, this is usually done with position: sticky<\/code> plus top: 0<\/code>. Unlike position: fixed<\/code>, a sticky element stays in the normal page flow until you scroll past it, then it sticks. I like to change the header\u2019s background, height, and shadow once the user scrolls a little, which improves readability over the content and makes the header feel subtle at the top, then more solid as you move down.<\/p>\n\n\n\n

Key CSS for the sticky behavior looks like this:<\/p>\n\n\n\n

.header {\n  position: sticky;\n  top: 0;               \/* stick to top when reached *\/\n  z-index: 1000;        \/* keep it above page content *\/\n}\n<\/pre>\n\n\n\n
To \u201cchange on scroll,\u201d I add or remove a class on the header when the page scroll position is greater than a small threshold. For example:<\/p>\n\n\n\n
header.classList.toggle('scrolled', window.scrollY > 10);\n<\/pre>\n\n\n\n
This flips the .scrolled<\/code> class on the header element. Then I can define different styles for .header.scrolled<\/code> in CSS.<\/p>\n\n\n\n
Example 1: Sticky header that changes on scroll<\/h2>\n\n\n\n
This first example uses mostly a single div for the header, minimal CSS, and a tiny script that adds a shadow, a darker background, and slightly reduces padding once you scroll. Copy, paste, and run it in your browser.<\/p>\n\n\n\n
<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\" \/>
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
  <title>Quick Sticky Header That Changes on Scroll<\/title>
  <style>
    :root {
      --text: #111827;
      --text-inverse: #ffffff;
      --bg: rgba(255, 255, 255, 0.7);
      --bg-scrolled: #111827;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.6;
      color: var(--text);
    }

    \/* Sticky header *\/
    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--bg);
      color: var(--text);
      backdrop-filter: saturate(180%) blur(8px);
      padding: 16px 20px;
      transition:
        background-color 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease,
        padding 200ms ease;
    }

    \/* Style once scrolled *\/
    .header.scrolled {
      background: var(--bg-scrolled);
      color: var(--text-inverse);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      padding: 10px 20px;
    }

    .title { font-weight: 700; font-size: 18px; }

    \/* Page content *\/
    .content { padding: 24px 20px; max-width: 800px; margin: 0 auto; }
    .block {
      height: 85vh;
      margin-bottom: 24px;
      padding: 20px;
      border-radius: 12px;
      background: linear-gradient(180deg, #fdf2f8, #eff6ff);
    }

    @media (max-width: 480px) {
      .title { font-size: 16px; }
    }
  <\/style>
<\/head>
<body>
  <div class=\"header\" id=\"header\">
    <div class=\"title\">My Sticky Header<\/div>
  <\/div>

  <main class=\"content\">
    <div class=\"block\">Scroll to see the header change, background darkens and padding shrinks.<\/div>
    <div class=\"block\">Keep scrolling for more space to test the behavior.<\/div>
    <div class=\"block\">End of demo.<\/div>
  <\/main>

  <script>
    (function () {
      const header = document.getElementById('header');
      const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 10);
      onScroll(); \/\/ initialize on load
      window.addEventListener('scroll', onScroll, { passive: true });
    })();
  <\/script>
<\/body>
<\/html><\/pre>\n\n\n\n
A couple of important lines:<\/p>\n\n\n\n