Sticky headers introduction

Focus for header and content

Mhead (short for mobile header) is a javascript plugin that draws attention to your navigation header by sliding it in view when appropriate, while saving space and gain focus for your content the rest of the time.

Example

Give it a go, scroll down the page to slide the header in and out of view.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mhead( "#my-header", {
                scroll: {
                    hide: 200
                }
            });
        }
    );
</script>

Download

The mhead.js plugin is licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.

NPM

Install with NPM:
npm install mhead.js

GitHub

Download directly from the Github repository.

How to use

Check out this tutorial to learn how to use the mhead.js plugin.
Sticky headers tutorial

Options

The mhead.js plugin provides a set of options for customizing your header. The default values can be overridden by passing new values to the method.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mhead( "#my-header", {
                // options
            });
        }
    );
</script>

Available options

Option Datatype Default value Description
hooks Object {} A collection of functions to hook into the plugin before the header is initialised.
Available hooks: "pinned" and "unpinned"
scroll
{
unpin Number 0 Amount of pixels to scroll down before hiding (unpinning) the header.
pin Number 0 Amount of pixels to scroll up before showing (pinning) the header.
tolerance Number 4 Minimum amount of pixels to scroll per scroll-event before showing or hiding the header.
}