下載

Development?(3.7kB) Production?(1.7kB)

Headroom.js 是什么？

Headroom.js 是一個輕量級、高性能的JS小工具（不依賴任何工具庫！），它能在頁面滾動時做出響應。此頁面頂部的導航條就是一個鮮活的案例，當頁面向下滾動時，導航條消失，當頁面向上滾動時，導航條就出現了。

Headroom.js 有什么用？

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

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

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

工作原理

簡單來說，headroom.js 只是為需要響應滾動事件的頁面元素增加或刪除一個CSS class：

<!-- 初始狀態 --> <header class="headroom"> <!-- 向下滾動時 --> <header class="headroom headroom--unpinned"> <!-- 向上滾動時 --> <header class="headroom headroom--pinned">

通過CSS class的設置，事情變得簡單了。所有的控制權就交回到了你的手中，當頁面向上或向下滾動時，你就可以通過設置CSS樣式來做出自己需要的變化了。

用法

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

純JS調用方式

// 獲取頁面元素 var myElement = document.querySelector("header"); // 創建 Headroom 對象，將頁面元素傳遞進去 var headroom = new Headroom(myElement); // 初始化 headroom.init();

以 jQuery/Zepto 插件形式調用

// 是不是很簡單！ // 注意： init() 默認在插件內部被調用了 $("#header").headroom();

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

<!-- selects $("[data-headroom]") --> <header data-headroom>

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

參數

Headroom.js 還能接受一個參數對象，用以改變其行為。你可以看一下 Headroom.js 源碼中對?Headroom.options?的定義。其 options 對象的結構如下：

{ // 在元素沒有固定之前，垂直方向的偏移量（以px為單位）offset : 0, // scroll tolerance in px before state changes tolerance : 0, // 對于每個狀態都可以自定義css classes classes : { // 當元素初始化后所設置的class initial : "headroom", // 向上滾動時設置的class pinned : "headroom--pinned", // 向下滾動時所設置的class unpinned : "headroom--unpinned" } }

案例

在?headroom.js playroom?頁面可以看到更多使用案例。你甚至還可以調整Headroom.js 的參數來觀察不同的效果。

License

Licensed under the?MIT License.

轉載于:https://www.cnblogs.com/boonya/p/4375636.html

總結

以上是生活随笔為你收集整理的Headroom.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。