HTML5導航條(Headroom.js)

我們在使用html預言師，為頁面頂部多留些空間。在不需要頁頭時將其隱藏的工具。在 headroom.js playroom 頁面可以看到更多使用案例。你甚至還可以調整Headroom.js 的參數(shù)來觀察不同的效果。

Headroom.js作用

固定頁頭（導航條）可以方便用戶在各個頁面之間切換。但是這也會帶來些問題…

大屏幕一般都是寬度大于高度的，也就是說屏幕高度要少一些。固定頁頭會占用一部分本來可以用于展示內容的區(qū)域。小屏幕一般是高度較大，但是別忘了，屏幕本來就小，頁頭再占用一部分的話，屏幕可用于展示內容的區(qū)域當然還是少。

Headroom.js 能幫你把不需要的頁面元素在合適的時間展示出來，讓用戶花更多時間關注你頁面上的內容。

使用方法

使用 headroom.js 是很簡單的。它提供了簡單的 JS API，另外，還可以作為 jQuery/Zepto 插件使用。

純JS調用方式

以 jQuery/Zepto 插件形式調用

插件還提供了一個 data-* API ：

注意：為了兼容，Zepto 的data module 也需要引入。