Headroom.js 滚动隐藏和展示页面元素，从而为页面留下更多空间。

2019独角兽企业重金招聘Python工程师标准>>>

http://www.bootcss.com/p/headroom.js/

http://blog.csdn.net/chenyulearn/article/details/19606751
 

纯JS调用

Include the headroom.js script in your page, and then:

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();

jQuery/Zepto调用

Include the headroom.js and jQuery.headroom.js scripts in your page, and then:

// simple as this!
// NOTE: init() is implicitly called with the plugin
$("header").headroom();

The plugin also offers a data-* API if you prefer a declarative approach.

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

Note: Zepto's additional data module is required for compatibility.

 AngularJS调用

Include the headroom.js and angular.headroom.js scripts in your page, and include the Headroom module

angular.module('app', [
// your requires
'headroom'
]);

And then use the directive in your markup:

<header headroom></header>
<!-- or -->
<headroom></headroom>
<!-- or with options -->
<headroom tolerance='0' offset='0' scroller=".my-scroller" classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

Note: in AngularJS, you cannot pass a DOM element as a directive attribute. Instead, you have to provide a selector that can be passed to angular.element. If you use default AngularJS jQLite selector engine, here are the compliant selectors.

转载于:https://my.oschina.net/momomo1987/blog/1486253