Headroom.js 是什么？
Headroom.js 是一个轻量级、高性能的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样式来做出自己需要的变化了。
代码demo 你要自己下载Headroom.js并引入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Headroom.js</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="headroom.css" type="text/css">
<!--<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">-->
<!--<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>-->
<script src="headroom.js" type="text/javascript"></script>
<!--<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>-->
</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>
var header = document.querySelector("header");
var headroom = new Headroom(header, {
tolerance: 5,
offset: 205,
classes: {
initial: "animated",
pinned: "slideDown",
unpinned: "slideUp"
}
});
headroom.init();
//jquery的使用方式
// $(function() {
// $("#header").headroom({
// tolerance: 5,
// offset: 205,
// classes: {
// initial: "animated",
// pinned: "slideDown",
// unpinned: "slideUp"
// }
// });
// })
</script>
</body>
</html>复制代码css样式：
*{
margin: 0;
padding: 0;
}
.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; /*表示动画执行的时间*/
-webkit-animation-fill-mode: both; /*规定动画在播放前和之后其动画效果是否可见*/
animation-fill-mode: both
}
@-webkit-keyframes slideDown { /*表示匀速地执行动画*/
0% {
-webkit-transform: translateY(-46px);
}
100% {
-webkit-transform: translateY(0);
}
}
.animated.slideDown {
-webkit-animation-name: slideDown; /*规定需要绑定到选择器的 keyframe 名称。。*/
animation-name: slideDown
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(-46px);
}
}
.animated.slideUp {
-webkit-animation-name: slideUp;
animation-name: slideUp
}复制代码