文章目录[隐藏]
Headroom.js 是什么？
为页面顶部多留些空间。在不需要页头时将其隐藏。
Headroom.js 有什么用？
固定页头（导航条）可以方便用户在各个页面之间切换。但是这也会带来些问题…
大屏幕一般都是宽度大于高度的，也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大，但是别忘了，屏幕本来就小，页头再占用一部分的话，屏幕可用于展示内容的区域当然还是少。
Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来，让用户花更多时间关注你页面上的内容。
Headroom.js工作原理
简单来说，headroom.js 只是为需要响应滚动事件的页面元素增加或删除一个CSS class：
<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">
通过CSS class的设置，事情变得简单了。所有的控制权就交回到了你的手中，当页面向上或向下滚动时，你就可以通过设置CSS样式来做出自己需要的变化了。
Headroom.js用法
使用 headroom.js 是很简单的。它提供了简单的 JS API，另外，还可以作为 jQuery/Zepto 插件使用。
1 纯JS调用方式
// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象，将页面元素传递进去
var headroom = new Headroom(myElement);
// 初始化
headroom.init();
2 以 jQuery/Zepto 插件形式调用
// 是不是很简单！
// 注意： init() 默认在插件内部被调用了
$("#header").headroom();
3 插件还提供了一个 data-* API ：
<!-- selects $("[data-headroom]") -->
<header data-headroom>
注意：为了兼容，Zepto 的data module 也需要引入。
4 参数
Headroom.js 还能接受一个参数对象，用以改变其行为。你可以看一下 Headroom.js 源码中对 Headroom.options 的定义。其 options 对象的结构如下：
{// 在元素没有固定之前，垂直方向的偏移量（以px为单位）
offset : 0,
// scroll tolerance in px before state changes
tolerance : 0,
// 对于每个状态都可以自定义css classes
classes : {
// 当元素初始化后所设置的class
initial : "headroom",
// 向上滚动时设置的class
pinned : "headroom--pinned",
// 向下滚动时所设置的class
unpinned : "headroom--unpinned"
}}
5 动态调整 Headroom.js 的参数
容差："tolerance": 5,
偏移： "offset": 205,
样式： "classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}
纯 JS 方式：
使用纯 JS 代码，将options对象对位第二个参数传递给构造函数。注意，以这种方式使用Headroom.js 时，options对象不会和默认参数进行合并（也就是说，你必须定义所有参数 ）。
var headroom = new Headroom(elem, {
"tolerance": 5,
"offset": 205,
"classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}});
headroom.init();
// to destroy
headroom.destroy();
插件方式：
以插件方式使用的话，options对象自动与默认参数对象合并（即使用 $.extend(true, {}, defaultOptions, yourOptions) 方法进行合并）。
$("header").headroom({
"tolerance": 5,
"offset": 205,
"classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}});
// to destroy
$("#header").headroom("destroy");
Data API 方式：
如果使用 data-* API 方式，任何参数都需要以 data 属性的形式出现。所有以 data-* API 传递的参数都将与默认参数合并。通过传递 JSON 对象可以改变 headroom.js 默认设置的 CSS class。
<header data-headroom data-tolerance="5" data-offset="205" data-classes='{"initial":"animated","pinned":"slideDown","unpinned":"slideUp"}'></header>
// to destroy, in your JS:
$("header").data("headroom").destroy();