突然在看网页时，想：下拉页面时菜单关闭，向上拉时菜单显示。这会不会很有用户体验呢？网上搜索，Headroom.js正好符合！于是研究之！

一：插件简介

headroom是用纯Javascript写的插件，用来隐藏和展示页面元素，从而为页面留下更多空间。比如使用headroom能使导航栏当页面下滚时消失，当页面上滚时候又出现。

用时一定要注意：首先需要引用headroom.js和jQuery.headroom.js。将以下的代码加入到你的代码中。

headroom.js作用：感应元素不同的状态为之更改相应的class。

jQuery.headroom.js作用：提供jquery插件方式和Data-API方式调用headrooom()。

心急的用户可直接看第六点。

一开始以为很简单，结果花了将近一上午和一中午的时间，才搞清楚，才总结出来这篇文章，其中有很多值得注意的地方！

为什么呢？注意的以下几点：

1、github上的src下的Headroom.js（第一个字母是大写）是个错误的，而 jQuery.headroom.js 是正确的，没有问题的；

2、网址示例http://wicky.nillia.ms/headroom.js/源代码中的main.js中有好几个插件，其中有一个插件是headroom.js，是v0.3而不是最新版v0.8。于是我总结出来了headroom.v0.3.js和headroom.v0.8.js两个插件。但目前还是建议用v0.7的，网址分别是：

http://cdn.bootcss.com/headroom/0.7.0/headroom.js

http://cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js

3、headroom.js必须放在jquery插件之后；

4、headroom.js单一插件使用后，可用 headroom.init(); 这个功能；

5、Headroom.js加jQuery.headroom.js 两个插件一起使用，才可用 $("#header").headroom(); 这个功能。

明白了以上注意点后，才可以熟练的运用此插件！！！

二：下载及演示

1、官方

最新版：v0.8.0 (2016-03-16)

作者:WickyNilliams

插件官网：http://wicky.nillia.ms/headroom.js/

下载地址：https://www.github.com/WickyNilliams/headroom.js

注：github中src/Headroom.js是不能用的，一事实上要谨慎不用！

2、CDN下载及演示

翻译官网网址：http://www.bootcss.com/p/headroom.js/

注：可能翻译的是旧版，不全面

bootcdn引用地址： http://www.bootcdn.cn/headroom/

注：此CDN都可以使用！这个CDN还是挺靠谱的！而且有不同版本插件引用。

3、本站下载及演示（杨红伟总结）

本站演示地址：http://www.ijquery.cn/study/demo/headroom

本站下载地址：http://git.oschina.net/hongweizhiyuan/headroom.js

杨红伟翻译地址：暂无

杨红伟总结headroom.v0.3.js地址：http://www.ijquery.cn/study/demo/headroom/headroom.v0.3.js

杨红伟总结headroom.v0.8.js地址：http://www.ijquery.cn/study/demo/headroom/headroom.v0.8.js

三：jQuery适应性

版本：1.2.3以下（就是所有版本都可用）

四：安装

Git安装：

git clone https://github.com/WickyNilliams/headroom.js

OSC Git安装：

git clone http://git.oschina.net/hongweizhiyuan/headroom.js

注：不能通过bower、npm安装。

五：参数介绍

V0.8的插件比较多，包括如下部分

{
   // 在元素没有固定之前，垂直方向的偏移量（以px为单位）
   offset : 0,
   // 在状态改变前滚动的公差（以px为单位）
   tolerance : 0,
   // 你可以指定公差，是向上滚动还是向上滚动
   tolerance : {
       up : 5,
       down : 0
   },

   // css类的应
   classes : {
       // 当元素初始化后所设置的class
       initial : "headroom",
       // 向上滚动时设置的class
       pinned : "headroom--pinned",
       // 向下滚动时所设置的class
       unpinned : "headroom--unpinned",
       // 向上偏移的class
       top : "headroom--top",
       // 向下偏移的class
       notTop : "headroom--not-top",
       // 滚动区域的底部
       bottom : "headroom--bottom",
       // 不在滚动区域的底部
       notBottom : "headroom--not-bottom"
   },

   // 监听滚动事件的元素,默认为 `window`
   scroller : someElement,
   // 被固定时的回调事件, `this` 是headroom的对象
   onPin : function() {},
   // 当放开的回调事件, `this` 是 headroom的对象
   onUnpin : function() {},
   // 上边偏移量的回调事件, `this` 是 headroom的对象
   onTop : function() {},
   // 下边偏移量的回调事件, `this` 是 headroom的对象
   onNotTop : function() {},
   // 在页面询问的回调事件, `this` 是 headroom的对象
   onBottom : function() {},
   // 从页面底部移开的回调事件, `this` 是 headroom的对象
   onNotBottom : function() {}
}

六：最简使用教程

jquery版演示地址： http://www.ijquery.cn/study/demo/headroom/demo1.html

HTML代码：

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<title>Headroom.js</title>
		<meta name="viewport" content="width=device-width">
		<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="demo1.css">
	</head>

	<body>

		<header id="header" class="header header--fixed">
			Headroom.js
		</header>

		<!--测试增加页面/start-->
		<div style="height:1000px;background: #FF0000;color:#FFFFFF;padding-top:46px;text-align: center;font-size: 60px;">红</div>
		<div style="height:1000px;background: #00FF00;color:#FFFFFF;text-align: center;font-size: 60px;">绿</div>
		<div style="height:1000px;background: #0000FF;color:#FFFFFF;text-align: center;font-size: 60px;">蓝</div>
		<!--测试增加页面/end-->

		<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/headroom.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>

		<script>
			$(function() {
				$("#header").headroom({
					tolerance: 5,
					offset: 205,
					classes: {
						initial: "animated",
						pinned: "slideDown",
						unpinned: "slideUp"
					}
				});
			})
		</script>

	</body>

</html>

CSS代码：

.header {
	background-color: #292f36;
	height:46px;
	line-height: 46px;
	color: #FFFFFF;
	padding: 0 1.5em;
	text-align: center;
}

.header--fixed {
	position: fixed;
	z-index: 10;
	right: 0;
	left: 0;
	top: 0
}

.animated {
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	-o-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-4em)
	}

	100% {
		-webkit-transform: translateY(0)
	}
}

@-moz-keyframes slideDown {
	0% {
		-moz-transform: translateY(-4em)
	}

	100% {
		-moz-transform: translateY(0)
	}
}

@-o-keyframes slideDown {
	0% {
		-o-transform: translateY(-4em)
	}

	100% {
		-o-transform: translateY(0)
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-4em)
	}

	100% {
		transform: translateY(0)
	}
}

.animated.slideDown {
	-webkit-animation-name: slideDown;
	-moz-animation-name: slideDown;
	-o-animation-name: slideDown;
	animation-name: slideDown
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-4em)
	}
}

@-moz-keyframes slideUp {
	0% {
		-moz-transform: translateY(0)
	}

	100% {
		-moz-transform: translateY(-4em)
	}
}

@-o-keyframes slideUp {
	0% {
		-o-transform: translateY(0)
	}

	100% {
		-o-transform: translateY(-4em)
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-4em)
	}
}

.animated.slideUp {
	-webkit-animation-name: slideUp;
	-moz-animation-name: slideUp;
	-o-animation-name: slideUp;
	animation-name: slideUp
}

注：js版演示地址： http://www.ijquery.cn/study/demo/headroom/demo2.html

第103款插件：Headroom.js在不需要页头时将其隐藏