headroom.js是一个轻量级、高性能的js小工具（不依赖任何工具库！），它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例，当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。headroom.js不仅能够响应鼠标滚轮事件，在移动端也能够良好的运行。
headroom工作原理
简单来说，headroom.js 只是为需要响应滚动事件的页面元素增加或删除一些css类，比如在本博客中，headroom.js会实现这样一套动作：
<!-- 初始状态的类名 -->
<header class="animated headroom--top headroom--not-bottom"><!-- 上滚至顶部 -->
<header class="animated headroom--not-bottom slideDown headroom--top"><!-- 上滚至触发导航条下降 -->
<header class="animated headroom--not-top headroom--not-bottom slideDown"><!-- 下滚至触发导航条隐藏 -->
<header class="animated headroom--not-top headroom--not-bottom slideUp"><!-- 下滚至底部 -->
<header class="animated headroom--not-top slideUp headroom--bottom">通过为css类设置不同的样式，当页面向上或向下滚动时，我们就可以控制导航条的显示与隐藏，甚至为它实现一个动画特效。
headroom的用法
首先需要在页面的head部分引用headroom.js，只需要在head部分添加如下语句就可以了,这里作者引用了七牛的静态资源：
<script src="https://cdn.staticfile.org/headroom/0.12.0/headroom.min.js"></script>将需要浮动的导航条的id名称修改为header，当然也可以选择改动下面的程序，将getElementById(“header”)语句中的id替换为实际站点导航元素的id，然后为站点添加如下的js语句：
/*========
事件处理函数
========*/
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
/*========
导航栏动作
========*/
function headerAction() {
header = new Headroom(document.getElementById("header"), {
tolerance: 5,
offset : 205,
classes: {
initial: "animated",
pinned: "slideDown",
unpinned: "slideUp"
}
});
header.init();
}
addLoadEvent(headerAction);如果添加无误的话，此时目标元素已经可以响应滚动事件实时变换类名了，但是因为没有为其设置css，所以视觉上暂时并没有什么变化。
添加一些css
.animated {
animation-duration: .6s;
animation-fill-mode: both;
}
.animated.slideUp {
animation-name: slideUp;
}
.animated.slideDown {
animation-name: slideDown;
}
@keyframes slideDown{0%{transform:translateY(-55px)}100%{transform:translateY(0)}}
@keyframes slideUp{0%{transform:translateY(0)}100%{transform:translateY(-55px)}}因为本博客的导航高度仅50像素，所以这里的translateY设置为了55像素，css的参数可以根据自己的实际需求做相应的更改。
headroom实例的可用方法
因为呼出了移动端菜单，或者弹出了一个优先的窗口，希望暂时停止菜单栏滚动的时候，headroom也提供了解决相应问题的方法：
- init():实例化一个对象；
- destroy(): 销毁一个实例，移除事件监听器和任何添加的类；
- pin(): 强制设置 headroom 实例的状态为 pinned；
- unpin(): 强制将 headroom 实例的状态设置为 unpinned；
- freeze()：冻结空间实例的状态（固定或取消固定），不再响应滚动事件；
- unfreeze(): 恢复响应滚动事件。
