How to create a sticky header in CSS and JavaScript?

A sticky header refers to a web design feature wherein a header remains visible and “sticks” to the top of the page as the user scrolls down. This is useful for keeping navigation links or important information always accessible.

The example provided achieves a sticky header effect using basic HTML, CSS, and JavaScript. When the user scrolls up to the top of the page, the header disappears, and it becomes visible again as the user scrolls down.

Step-by-Step Explanation

Step 1: Setting up the HTML Structure

<header id="header">
    Sticky Header
</header>

<div class="content">
    ...
</div>

Here, the structure is simple: a header element and a content div. The id="header" attribute is important because it allows us to target this header specifically in our JavaScript.

Step 2: Styling the Sticky Header and Content

Header Styles

header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: top 0.3s;
}

• background-color and color give the header a dark background and white text.
• padding adds some space around the header’s text.
• position: fixed; ensures the header remains fixed at the top of the viewport.
• width: 100%;, top: 0;, and left: 0; position the header at the top of the page, spanning the full width.
• z-index: 1000; ensures the header is displayed above other page elements.
• transition: top 0.3s; provides a smooth 0.3-second transition for the top property, used later in JavaScript.

Content Styles

.content {
    margin-top: 60px; /* Assuming the height of the header is about 50px + padding. Adjust accordingly. */
  height: 1000px;
}

This ensures there’s space between the content and the header, so the content doesn’t begin directly underneath the fixed header.

Step 3: Implementing Sticky Header Behavior with JavaScript

let header = document.getElementById('header');
let sticky = header.offsetTop;

window.onscroll = function() {
    if (window.pageYOffset > sticky) {
        header.style.top = "0";
    } else {
        header.style.top = "-60px";
    }
};

• document.getElementById('header'); gets the header element from our HTML.
• header.offsetTop; gets the current vertical position of the header in the viewport, which is 0 since it’s positioned at the top.

The function assigned to window.onscroll is triggered every time the user scrolls:

• window.pageYOffset provides the number of pixels the content of a page has been scrolled upward.
• If the user has scrolled more than the initial top position of the header (sticky), the header’s top style is set to “0”, making it visible.
• Otherwise, the header’s top style is set to “-60px”, moving it out of view. This value might need to be adjusted depending on the actual height of your header.

Sticky Header Live Demo: HTML, CSS and JavaScript Tutorial

See the Pen Sticky Header in CSS and JS by w3tweaks (@w3tweaks) on CodePen.

In essence, as the user scrolls down, the header remains at the top. But as they scroll back up, once they reach the very top of the page, the header hides itself.