一、Headroom.js是什么？
Headroom.js是一個輕量級、高性能的JS小工具(不依賴不論什么工具庫。)，它能在頁面滾動時做出響應。
此頁面頂部的導航條就是一個鮮活的案例,當頁面向下滾動時,導航條消失,當頁面向上滾動時,導航條就出現了。
二、Headroom.js有什么用？
固定頁頭(導航條)能夠方便用戶在各個頁面之間切換。可是這也會帶來些問題…
大屏幕一般都是寬度大於高度的,也就是說屏幕高度要少一些.固定頁頭會占用一部分本來能夠用於展示內容的區域。
小屏幕通常是高度較大,可是別忘了,屏幕本來就小,頁頭再占用一部分的話,屏幕可用於展示內容的區域當然還是少。
Headroom.js 能幫你把不須要的頁面元素在合適的時間展示出來,讓用戶花很多其它時間關注你頁面上的內容。
三、Headroom.js怎樣使用
以下的樣例是基於bootstrap框架和jquery插件的,在bootstrap框架下能夠高速寫出導航欄navbar,
然后以jquery插件方式對導航欄navbar調用headroom()
1、首先須要引用headroom.js和jquery.headroom.js。
(文件附於演示樣例中)
<script src="js/headroom.js"></script> <script src="js/jquery.headroom.js"></script>
2、通過css的trasition屬性達到變換效果。加入例如以下CSS
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>
3、之后加入以下的js代碼,使用jquery插件的方式調用。".navbar-fixed-top"僅僅是用來獲取導航欄navbar，
也能夠用其它選擇器來獲取navbar目標元素
<script type="text/javascript">
$(".navbar-fixed-top").headroom();
</script>
上述的效果僅僅是通過css自帶的trasition屬性來實現效果,比較單調。
能夠結合animate.css實現很多其它的美麗的消失和出現的效果。(查看效果)
animate.css使用純css為各種元素實現不同的動畫效果，每一種class相應一種動畫效果,
所以將animate.css引入代碼后headroom()能夠直接使用已經寫好的class。
引入animate.css作為效果之后能夠使用例如以下參數實現動畫效果
$(".navbar-fixed-top").headroom( {
"tolerance" : 5,
"offset" : 75,
"classes" : {
"initial" : "animated",
"pinned" : "flipInX",
"unpinned" : "flipOutX"
}
});