http://www.bootcss.com/p/headroom.js/
示例
1、通过CSS设置变化的三个样式
.headroom {
transition: transform 200ms linear;
display: block;
height: 300px;
width: auto;
background-color: red;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
background-color: green;
}
通过class设置属性
<!-- 初始状态 --><header class="headroom">
<!-- 向下滚动时 --><header class="headroom headroom--unpinned">
<!-- 向上滚动时 --><header class="headroom headroom--pinned">
2、通过js调用
//获取页面元素
var myElement=Document.querySelector("header");
var headroom=new Headroom(myElelemt);//Headroom为内置函数
headroom.init();
3、传参数
var headroom = new Headroom(elem, {
"tolerance": 5,
"offset": 205,
"classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}});
headroom.init();
// to destroy
headroom.destroy();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="headroom.min.js"></script>
<style>
.headroom {
transition: transform 200ms linear;
display: block;
height: 300px;
width: auto;
background-color: red;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
background-color: green;
}
#div1{
height: 10000px;
background-color: #666666;
}
</style>
<body>
<header id="header" ></header>
<div id="div1">
</div>
</body>
<script>
var elem=document.querySelector("header");
var headroom = new Headroom(elem, {
"tolerance": 1,
"offset": 20,
"classes": {
"initial": "headroom",
"pinned": "headroom--pinned",
"unpinned": "headroom--unpinned"
}
});
headroom.init();
</script>
</html>
