Documentation introduction

Getting started

This documentation page assumes you have some knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

If you're new to using the mhead.js plugin, please grab a copy of the mhead.js plugin and try the 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.
}