Sticky Headers In HTML CSS (Very Simple Examples)

Welcome to a quick tutorial on how to create sticky headers in HTML and CSS. So you want to stick a header or navbar to the top of the page? Don’t want it to go away when the user scrolls?

Yep, it’s that easy. But let us walk through more examples in this guide, read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Sticky Header	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

EXAMPLE 1) FIXED HEADER

1A) DEMO

 

1B) THE HTML

<!-- (A) FIXED HEADER -->
<header id="page-head">
  MY SITE
</header>
 
<!-- (B) CONTENTS -->
<main id="page-main">
  <h1>PAGE TITLE</h1>
  <p>Contents here.</p>
</main>

This should be very straightforward, just your usual:

1. <header id="page-head"> Page header to fix on top.
2. <main id="page-main"> Contents.

 

1C) THE CSS

/* (A) ENTIRE PAGE */
body {
  padding: 0;
  margin: 0;
}

/* (B) HEADER */
#page-head {
  /* (B1) FIXED AT TOP */
  position: fixed;
  top: 0;
  z-index: 9;
 
  /* (B2) DIMENSIONS */
  width: 100%;
  height: 30px;
  padding: 10px;
}

/* (C) CONTENTS - MAKE SURE NOT COVERED BY HEADER */
#page-main {
  margin-top: 30px;
  padding: 10px;
}

No need to be intimidated, just a bit of CSS magic here.

1. padding:0; margin:0; To remove the annoying default page padding and spaces.
2. To fix the header at the top of the page.
   • position: fixed; top: 0; Does the “fixed on top” magic.
   • z-index: 9; Makes sure that the header bar is on top of other elements. Just give this a higher number if the header is being covered over by another element.
   • width: 100%; height; 30px; padding: 10px; The dimensions, to create a full-width header bar.
3. #page-main { margin-top: 30px; padding: 10px; } This margin offset will make sure that the top part of the contents is not covered under the fixed header.

 

 

EXAMPLE 2) STICKY HEADER AS USER SCROLLS

2A) DEMO

 

2B) THE HTML

<!-- (A) HEADER -->
<header id="page-head">
  MY SITE
</header>
 
<!-- (B) STICKY NAV BAR -->
<nav id="page-nav">
  <a href="#">First</a>
  <a href="#">Second</a>
  <a href="#">Third</a>
</nav>
 
<!-- (C) CONTENTS -->
<main id="page-main">
  <h1>PAGE TITLE</h1>
  <p>Contents here.</p>
</main>

In this next example, we have 3 sections instead of 2.

1. <header id="page-head"> The page header, but we will not “sticky” this one.
2. <nav id="page-nav"> The navbar, we will stick this to the top as the user scrolls down.
3. <main id="page-main"> The contents.

 

2C) THE CSS

/* (A) ENTIRE PAGE */
body {
  padding: 0;
  margin: 0;
}
 
/* (B) STICKY NAVBAR */
#page-nav {
  position: sticky;
  top: 0;
  z-index: 9;
}

1. The usual “remove default page padding and spacing”.
2. As in the introduction snippet, we only need to add position: sticky; top: 0; to create the sticky header.

Yep, it’s that simple.

 

 

EXAMPLE 3) DETECTING WHEN A HEADER IS “STUCK”

3A) DEMO

 

3B) THE HTML

<!-- (A) HEADER -->
<header id="page-head">
  MY SITE
</header>
 
<!-- (B) STICKY NAV BAR -->
<nav id="page-nav">
  <a href="#">First</a>
  <a href="#">Second</a>
  <a href="#">Third</a>
</nav>
 
<!-- (C) CONTENTS -->
<main id="page-main">
  <h1>PAGE TITLE</h1>
  <p>Contents here.</p>
</main>

Look no further, this is the same as the previous example. But we will be applying a different background color to the header navbar when it is “stuck” on top.

 

3C) THE CSS

/* (A) ENTIRE PAGE */
body {
  padding: 0;
  margin: 0;
} 
 
/* (B) STICKY NAVBAR */
#page-nav {
  position: sticky;
  top: -1px; /* to detect intersection */
  z-index: 9;
}
 
/* (C) NAVBAR IS "STUCK" */
#page-nav.stuck { background: red; }

How do we detect if the header navbar has been “stuck” to the top? Sadly, there is no CSS :stuck pseudo-class, but we do have a little trick to detect “stuck”. Take note of how we displace the navbar to top: -1px.

 

3D) THE JAVASCRIPT

window.onload = () => {
  // (A) INTERSECTION OBSERVER
  const observer = new IntersectionObserver(([evt]) => {
    evt.target.classList.toggle("stuck", evt.intersectionRatio < 1)
    }, { threshold: [1] });
 
  // (B) OBSERVE NAVBAR
  observer.observe(document.getElementById("page-nav"));
};

Sadly, a little bit of Javascript is required.

• Basically, when the navbar is stuck, the top position will shift.
• We are simply using Javascript IntersectionObserver to detect this change.
• When the navbar is stuck, we apply a .stuck CSS class to it.

Credits to David Walsh for this nifty trick.

 

 

 

DESIGN CONSIDERATIONS – MOBILE SUPPORT

Before you plaster sticky headers all over your website, please consider if it adds more to the usability of the website. “Sticky interface” may work well on big screens, but it becomes a problem on the small mobile screens instead – They don’t have a lot of space, and having a fixed header makes even less space to display contents.

 

LINKS & REFERENCES

• Position – MDN
• How to Detect When a Sticky Element Gets Pinned – David Walsh
• Freeze Table Rows & Columns – Code Boxx
• Sticky Footers – Code Boxx

 

INFOGRAPHIC CHEAT SHEET