headroom.js
2014-07-27 本文已影响0人
liguoqinjim
现在很多的网站使用了前端框架，如BootStrap。
在使用BootStrap制作网页的时候，我们经常会用到BootStrap所提供的导航条组件。
并且很多的网站会把这个导航条固定在网页的顶上，虽然好看，但是有的时候我们要在页面上呈现很多东西的时候，我们就会觉得固定在顶部的导航条是多余的。
这个时候，我们就可以使用headroom.js，headroom.js可以使我们的网页在滚动到下方的时候，顶部的导航条会自动收起来。给我们的页面更多的空间。
1.首先在<head>标签中加入
<style>
.headroom {
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}
</style>
2.在<body>标签的最后引入headroom.js
<script src="http://cdn.bootcss.com/headroom/0.5.0/headroom.min.js"></script>
3.在引入了headroom.js之后再加入headroom.js代码
<script>
// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
</script>
