Headroom.js是一个轻量级的纯js组件，用来隐藏或显示页面上的元素，为你的页面留出空的空间来显示更多的内容。
Headroom.js是什么？
Headroom.js是一个轻量级、高性能的js小工具，可以在页面滚动时做出响应。这个页面顶部的导航栏就是一个生动的案例。当页面向下滚动时，导航栏消失，当页面向上滚动时，导航栏出现。
Headroom.js有什么用？
固定的页眉可以方便用户在页面之间切换。但是也会带来一些问题…
一般大屏幕的宽度大于高度，也就是说屏幕的高度较少。固定的标题将占据本可用于显示内容的部分区域。一般小屏幕高，但是别忘了屏幕本来就小。如果页眉占了一部分，当然屏幕能用来显示内容的面积还是很小的。
Headroom.js可以帮助你在合适的时间展示不必要的页面元素，让用户花更多的时间关注你页面上的内容。
操作原理
简单来说，headroom.js只是为需要响应滚动事件的页面元素添加或删除一个CSS类:
有了CSS类的设置，事情就变得简单了。所有的控制权都还给你。当页面向上或向下滚动时，您可以通过设置CSS样式进行所需的更改。
使用
使用headroom.js非常简单，它提供了一个简单的JS API。此外，它还可以用作jQuery/Zepto插件。
纯JS调用模式
//获取页面元素varmy element = document . query selector；//创建一个Headroom对象，在var headroom = new Headroom中传递页面元素；//初始化headroom.init
作为jQuery/Zepto插件调用
//是不是很简单！//注意:init是调用$的。默认情况下插件内部的净空高度；
该插件还提供了一个data-* API:
注:为了兼容性，还需要介绍Zepto的数据模块。
纯JS模式
使用纯JS代码，将options对象的第二个参数传递给构造函数。请注意，以这种方式使用Headroom.js时，options对象不会与默认参数合并。
var净空=新净空；headroom.initdestroyheadroom.destroy
插件模式
当用作插件时，options对象会自动与默认的parameter对象合并。
$.净空高度；//销毁$。净空高度；
数据API模式
如果使用data-* API，任何参数都需要作为数据属性出现。data-* API中传递的所有参数都将与默认参数合并。您可以通过传递JSON对象来更改headroom.js的默认CSS类。
//要销毁，在你的JS:$ . data . destroy；
参数
Headroom.js也可以接受一个参数对象来改变它的行为。可以看看Headroom.js源代码中Headroom.options的定义。其选项对象的结构如下:
{//元素未固定前，垂直偏移量为offset: 0，//状态改变前px中的滚动容差容差:0，//对于每个状态，可以自定义CSS classes class:{//class initial:元素初始化时设置的" Headroom "，//ClassPinned:向上滚动时设置的" Headroom-Pinned"}}
情况
你可以在headroom.js playroom页面上看到更多用例。你甚至可以调整Headroom.js的参数来观察不同的效果。
相关链接
GitHub:https://github.com/WickyNilliams/headroom.js官方网站:https://wicky.nillia.ms/headroom.js/
