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

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: http://www.cnblogs.com/unofficial official website address:www.pushself.com)

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.

usage

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.

Parameters

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"    }}

：

HTTPS://raw.githubusercontent.com/wickynilliams/headroom.js/master/dist/headroom.js

This article original blog address: http://www.cnblogs.com/unofficial official website address:www.pushself.com)