导航 headroom详细使用方法
2018-10-12 本文已影响0人
方_糖
headroom官网(中文版)：http://www.bootcss.com/p/headroom.js/
headroom官网(国外版)：http://wicky.nillia.ms/headroom.js/
headroom在线使用地址：https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js
headroom--Playroom:http://wicky.nillia.ms/headroom.js/playroom/
想实现这样的效果吗（当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。）
Playroom.gif
那就先实现这样的效果吧
easy.gif
一 . 简单的headroom使用
1.使用纯JS来写
HTML部分
<div class="header" id="header"></div>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
CSS部分
<style>
.header{
width:100%;
height: 60px;
background-color: red;
}
/* headroom改变时不同的样式 ，可以自由设置*/
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>
JS部分
<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script>
<!--注意：js一定要写在body的后面，因为要使用body里面的元素 -->
<script>
var myElement = document.querySelector("#header");
var headroom = new Headroom(myElement);
headroom.init();
</script>
完整代码
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script>
<style>
.header{
width:100%;
height: 60px;
background-color: red;
}
/* headroom改变时不同的样式 ，可以自由设置*/
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>
</head>
<body>
<div class="header" id="header"></div>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
.......
</body>
<!--注意：js一定要写在body的后面，因为要使用body里面的元素 -->
<script>
var myElement = document.querySelector("#header");
var headroom = new Headroom(myElement);
headroom.init();
</script>
</html>
2.使用JQuery来写
HTML和CSS部分没有变化
JS部分
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="headroom.js"></script>
<script type="text/javascript" src="jQuery.headroom.js"></script>
<!--注意：js一定要写在body的后面，因为要使用body里面的元素 -->
<script>
$("#header").headroom();
</script>
二 . 实现不同效果的的animate
到headroom.js中修改Headroom.options
(原始版)
Headroom.options = {
tolerance : {
up : 0,
down : 0
},
offset : 0,
scroller: window,
classes : {
pinned : 'headroom--pinned',
unpinned : 'headroom--unpinned',
top : 'headroom--top',
notTop : 'headroom--not-top',
bottom : 'headroom--bottom',
notBottom : 'headroom--not-bottom',
initial : 'headroom'
}
};
（修改版）
Headroom.options = {
tolerance : {
up : 0,
down : 0
},
offset : 0,
scroller: window,
classes : {
pinned : 'bounceInDown',
unpinned : 'bounceOutUp',
top : 'headroom--top',
notTop : 'headroom--not-top',
bottom : 'headroom--bottom',
notBottom : 'headroom--not-bottom',
initial : 'animated'
}
};
修改classes中的参数，然后对照使用CSS即可
三.结语
第二大点有不正确的地方还希望大家多多指教，希望和志同道合的朋友一起学习
