Sticky headers introduction

Beautiful sticky headers, with ease

Create a beautiful, eye-catching navigation header for mobile websites and web-apps, completely in style and fully compatible with the mmenu.js navigation menu.

As easy as it gets

A sticky navigation header might not be all that hard to create, but with the jQuery.mhead plugin you'll be able to do them exactly right, with very little effort. Just have a look at the examples below.

Animated headers

The jQuery.mhead plugin keeps the navigation header in view for the user when appropriate, while saving space and focus for your content the rest of the time.

Examples

Download

The jQuery.mhead 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 jquery.mhead

GitHub

Download directly from the Github repository.

How to use

Here's a basic HTML example for a header showing a title and a hamburger icon.

<div id="my-header" class="mh-head Sticky">
    <span class="mh-btns-left">
        <a class="fa fa-bars" href="#my-menu"></a>
    </span>
    <span class="mh-text">demo</span>
</div>

Check out this tutorial for more detailed information on how to use the jQuery.mhead plugin.

About the HTML

You can basically add any HTML inside a <div class="mh-header" />, but a lot of commonly used content hass already been made available. Here's a complete overview of all available classnames.

The header
.mh-head
The header itself.
.mh-size-2/3
Enlarges the header two or three times.
.mh-align-left/right
Aligns the text (.mh-text) or logo (.mh-logo) to the left or right.
Buttons
.mh-btns-left/right
A wrapper for a single button on the left or right.
.mh-btns-2/3-left/right
A wrapper for two or three buttons on the left or right.
.mh-hamburger
This button will be transformed into a functional animated hamburger icon.
Content
.mh-text
The header text.
.mh-list
A scrollable list of anchors.
.mh-form
A searchfield with submit button.
.mh-logo
An image fitted in the available space.
.mh-image
An image filling up the available space.

Options

The jQuery.mhead 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).ready(function() {
        $("#my-header").mhead({
            // options
        });
    });
</script>

Available options

Option Datatype Default value Description
1 See the description.
scroll A map of options or false for scroll.hide (and scroll.show).
{
hide Number 0 Amount of pixels to scroll down before hiding the header.
show Number 0 Amount of pixels to scroll up before showing the header.
tolerance Number 4 Minimum amount of pixels to scroll per scroll-event before showing or hiding the header.
}
hamburger
{
menu String null 1 Query selector for the menu that should be opened when clicking the hamburger icon. If omitted, the plugin will use the anchor href attribute or target the first mmenu menu that it finds.
animation String "collapse" The animation to use.
}