Lighted Building Letters: Create an Auto-Hiding Sticky Header with Headroom.js

Auto-hiding headers have been steadily popular in web design for quite a while. Many blogs and online magazines use the sticky header to keep users engaged and give them direct access to the navigation.

Medium has redefined this feature with a basic concept that hides the navigation while scrolling down but shows it while scrolling up. This concept has become a wildly popular trend and now you can easily replicate it using Headroom.js.

15 jQuery Plugins To Make Smart Sticky Elements

It is now common to see certain elements in a site fixed to a position when you scroll... Read more

Headroom.js is a free vanilla JavaScript library with no dependencies or excessive API features. You just add it to your HTML, target the page header, and let it run.

Headroom simply adds and removes certain CSS classes that animate in order to show/hide the header using JavaScript to detect the motion.

You could make this functionality yourself but why bother? Headroom is tested and supports all major browsers. It even plays nice with jQuery or Zepto if you already have a JS library installed on your site.

You’ll find plenty of code samples in the GitHub repo but here’s a simple example that targets the #header element:

var myElement = document.querySelector("#header");

// create a Headroom object passing in the #header element
var headroom  = new Headroom(myElement);

// initialize the library
headroom.init();

The init() function has plenty of options to customize. You can customize the different element classes, along with different event trigger callbacks where you can embed your own functions. For instance, if you want the element to fade after it’s unpinned you would use the onUnpin callback.

These options are all listed on the main plugin page, so check it out and see what you think. If you want to see Headroom in action have a look at the pen below that contains a full clone of the main demo page.

See the Pen Headroom.js demo by Nick Williams (@WickyNilliams) on CodePen.

How to Create CSS-only Sticky Footer

Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages. The script... Read more

The post Create an Auto-Hiding Sticky Header with Headroom.js appeared first on Hongkiat.

From https://ift.tt/2H0fTCQ, find us on maps: https://bit.ly/31tHUKW