For a recent project I needed to create a sticky header that was only visible after a certain point on the page. I found a few plugins available, some relied on jQuery, some had many extra features that weren’t necessary. Whilst jQuery isn’t always a bad thing, I was looking for a lightweight, dependency-free solution. Headhesive.js was created.
What does it do?
Headhesive.js creates an on-demand sticky header that will appear after a specific scroll distance, or at a certain element. No dependancies and no fancy extra frills to get in your way. It works exactly how you tell it.
How to use
First of all you’ll need to include the
headhesive.min.js file in your footer, then create an instance using any element:
This instantiates Headhesive.js on the
.header element, using the default options—see the readme for more info on options. Upon instantiating, the
.header element will be cloned with the class
.headhesive--clone. In this example, the cloned element will look like this:
No styles are injected via the plugin, keeping the plugin lightweight and as user customisable as possible. To create a basic hide/show effect we need to add some CSS magic to the cloned element:
We shift the element off-screen by setting the
transform: translateY property to
-100%. Alternatively, we could use a negative margin to move the element off-screen. I prefer
transform as there is no need to define any heights, and it works perfectly in IE9.
When reaching the target scroll distance, the class
.headhesive--stick is added. We can use this and create some styles to show the element:
We now have an on-demand sticky header!
Please check out the Headhesive.js project on GitHub for an always up-to-date guide on the options, methods, along with a downloadable demo.
If you have any questions or find an issue, please leave a comment below, or you can find me on Twitter.