Sticky headers

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.

Documentation Tutorial