Try Headroom.js – A JS Widget to Animate your Website Header

Sticky Headers are a boon to a website that takes care of the design as well as engages the user with the content in the header. To improve user experience a javascript widget Headroom.js has redefined the navigation menu access to the user.

Headroom.js – A  Free Vanilla JavaScript library or you can say a JS widget that gets started when the user scrolls. In simple terms, the header of the website slides out of view when scrolling down and slides back in when scrolling up.

headroom.js

The header is the backbone of a website that contains all the crucial information of the website right on top. And if it attractive, engaging and keeps a proximity with the users then it’s the time to cheer up.

Eager to replicate this effect on your website too..!

Then let’s get kickstarted with Headroom.js JS widget.

How to Use Headroom.js?

The very first step to getting started with Headroom.js is to download the JS files from the GitHub Repository.

Embed the downloaded file before the </body> tag and then get started.

OR

Headroom.js CDN:

You can also use the CDN of the lightweight, high-performance Headroom.js library.

How Headroom.js Works?

Headroom.js works with CSS as well as with pure Javascript. We will see this in the article a bit later.

Let’s learn more about CSS classes in headroom.js:

Add the CSS class=”headroom” to the element in which you want to implement Headroom.js

Now the interesting point comes to play:

Whenever the user scrolls down the web page then headroom.js will add an additional CSS class of headroom–unpinned.

And Whenever the user scrolls up the headroom–unpinned class is replaced and a new class of headroom–pinned is added.

That was the phenomenon using which Headroom.js fits itself in the header of the website.

Headroom.js is really extended to its limits and can be very well used with JavascriptjQuery/Zepto plugin, and AngularJS directive.

Recommended Readings:

Using Headroom.js with plain Javascript:

You can directly get started with the JS code if you have included the Headroom.js script in your web page.

The ‘headroom.init()‘ function initiated the js library and also starts the engine of Headroom.js.

You can customize the JS library on your own by just using all the valid functions in the library. Some of the functions which you can use are:

Use the onPin function to output an effect when the header is pinned.

Use the onUnpin function to output an effect when the header is unpinned.

There are much more functions that you can use to customize the headroom.js

This is the usage of Headroom.js using Javascript.

Now going further,

Using Headroom.js with jQuery/Zepto:

Headroom.js can easily be used with jQuery/Zepto. You just need to include the jQuery library of Headroom.js in the page.’

Now coming to the jQuery code of Headroom.js

The jQuery code is very short and can be implemented using jQuery easily.

Going further:

Using Headroom.js with AngularJS:

Headroom.js can also be used with AngularJS. You just need to include the jQuery library of Headroom.js in the page. Include the headroom.js and angular.headroom.js in the web page.

Now coming to the code of AngularJS which should be used to initiate the Headroom.js using AngularJS.’

These some ways by which you can use the Headroom.js javascript plugin in your web page.

Now moving forward you can also customize your header with some attractive options that are available in the headroom.js plugin.

Recommended Readings:

Headroom.js Options:

Headroom.js options

You can tweak your header with the headroom.js effects and options. Using the options in the javascript plugin is quite easy, you just have to learn more about them.

Offset: This is the option which customizes the vertical offset of the header.

Tolerance: This is scroll tolerance in headroom.js, Tolerance of the header can be optimized as per direction when moving up and moving down, see the code below:

You can also apply animation to your header when scrolling up and down. Headroom.js JS plugin has various stylesheets embedded in it by default like bounce.less, flip.less, slide.less, swing.less.

You can apply any of these to your header and see the change, here’s the below code to add classes to your JS plugin.’

This will give a swing effect to the header when you scroll up and down.

Below is the Headroom.js Demo on codepen, where you can find out the swing effect in the header, just scroll up and down.

Now you can check out the demo and apply your own classes and options to Headroom.js.

If you want to play more with the Javascript library then you can also visit the playroom of Headroom.js

So, it’s your time now to apply the Javascript library in your website and give your website an attractive and eye catchy look.

(Visited 380 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply