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?

The easiest way to create a sticky header is to set CSS position: sticky on the header.

  • <header style="position:sticky; top:0;">HEAD</header>

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

STICKY HEADERS

All right, let us now get into the examples of the sticky headers in HTML and CSS.

 

EXAMPLE 1) FIXED HEADER

1A) DEMO

MYSITE
PAGE TITLE
Contents here.

 

1B) THE HTML

1-fixed.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

1-fixed.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

MYSITE
PAGE TITLE
Contents here.

 

2B) THE HTML

2-sticky.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

2-sticky.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

MYSITE
PAGE TITLE
Contents here.

 

3B) THE HTML

3-stuck.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

3-stuck.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

3-stuck.js
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.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

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

 

INFOGRAPHIC CHEAT SHEET

How to Create Sticky Header Footer (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *