下載

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

Headroom.js 是什么？

Headroom.js 是一個(gè)輕量級(jí)、高性能的JS小工具（不依賴任何工具庫(kù)！），它能在頁(yè)面滾動(dòng)時(shí)做出響應(yīng)。此頁(yè)面頂部的導(dǎo)航條就是一個(gè)鮮活的案例，當(dāng)頁(yè)面向下滾動(dòng)時(shí)，導(dǎo)航條消失，當(dāng)頁(yè)面向上滾動(dòng)時(shí)，導(dǎo)航條就出現(xiàn)了。

Headroom.js 有什么用？

固定頁(yè)頭（導(dǎo)航條）可以方便用戶在各個(gè)頁(yè)面之間切換。但是這也會(huì)帶來些問題…

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

Headroom.js 能幫你把不需要的頁(yè)面元素在合適的時(shí)間展示出來，讓用戶花更多時(shí)間關(guān)注你頁(yè)面上的內(nèi)容。

工作原理

簡(jiǎn)單來說，headroom.js 只是為需要響應(yīng)滾動(dòng)事件的頁(yè)面元素增加或刪除一個(gè)CSS class：

<!-- 初始狀態(tài) --> <header class="headroom"> <!-- 向下滾動(dòng)時(shí) --> <header class="headroom headroom--unpinned"> <!-- 向上滾動(dòng)時(shí) --> <header class="headroom headroom--pinned">

通過CSS class的設(shè)置，事情變得簡(jiǎn)單了。所有的控制權(quán)就交回到了你的手中，當(dāng)頁(yè)面向上或向下滾動(dòng)時(shí)，你就可以通過設(shè)置CSS樣式來做出自己需要的變化了。

用法

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

純JS調(diào)用方式

// 獲取頁(yè)面元素 var myElement = document.querySelector("header"); // 創(chuàng)建 Headroom 對(duì)象，將頁(yè)面元素傳遞進(jìn)去 var headroom = new Headroom(myElement); // 初始化 headroom.init();

以 jQuery/Zepto 插件形式調(diào)用

// 是不是很簡(jiǎn)單！ // 注意： init() 默認(rèn)在插件內(nèi)部被調(diào)用了 $("#header").headroom();

插件還提供了一個(gè) data-* API ：

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

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

參數(shù)

Headroom.js 還能接受一個(gè)參數(shù)對(duì)象，用以改變其行為。你可以看一下 Headroom.js 源碼中對(duì)?Headroom.options?的定義。其 options 對(duì)象的結(jié)構(gòu)如下：

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

案例

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

License

Licensed under the?MIT License.

轉(zhuǎn)載于:https://www.cnblogs.com/boonya/p/4375636.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。