Page scrolling Show or hide element Headroom.js plugin helps you achieve scrolling effect

Source: Internet
Author: User

What is Headroom.js?

Headroom.js is a lightweight, high-performance JS gadget that doesn't rely on any tool library! ), which responds when the page scrolls. The navigation bar at the top of this page is a live case, and when the page scrolls down, the navigation bar disappears and the navigation bar appears when the page scrolls up.

What's the use of headroom.js?

fixed headers (navigation bars) allow users to switch between pages. But it also brings some problems ... This article original blog address: official website

The big screen is generally wider than the height, which means less screen height. A fixed page header occupies a portion of the area that could have been used to display content. Small screen is generally high, but do not forget that the screen is small, the page to occupy a portion of the words, the screen can be used to show the area of the content of course, or less.

Headroom.js can help you display unwanted page elements at the right time, allowing users to spend more time focusing on what's on your page.

Working principle

Simply put, Headroom.js simply adds or removes a CSS class for the page element that needs to respond to the scrolling event:

<!--initial state-->

With CSS class settings, things get easier. All control is handed back to your hands, and when the page scrolls up or down, you can make the changes you want by setting CSS styles.


The use of headroom.js is very simple. It provides a simple JS API, in addition, it can also be used as a Jquery/zepto plugin.

Pure JS Call mode
// Get page Elements var myelement = Document.queryselector ("header"); // Create a Headroom object to pass the page elements in var headroom  new  headroom (myelement); // Initialize
called in Jquery/zepto plug-in form
// isn't it simple!  //  Note: init () is called by default within the plug-in ("#header"). Headroom ();

The plugin also provides a data-* API:

<!--selects $ ("[Data-headroom]")-->

Note: For compatibility, Zepto's data module also needs to be introduced.


Headroom.js can also accept a parameter object to change its behavior. You can look at the definition of Headroom.js source code Headroom.options . The options object is structured as follows:

{    //offset in the vertical direction (in px) before the element is fixedoffset:0,    //scroll tolerance in PX before state changestolerance:0,    //You can customize the CSS classes for each Stateclasses: {//the class that is set when the element is initializedInitial: "Headroom",        //the class that is set when scrolling upPinned: "Headroom--pinned",        //The class that is set when scrolling downunpinned: "Headroom--unpinned"    }}


This article original blog address: official website

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.