現在很多的網站使用了前端框架，如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>
