Headroom.js外掛程式用法

標籤：set   ane   trasition   href   -o   引用   pre   top   targe   

一、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下載)

引入animate.css作為效果之後能夠使用例如以下參數實現動畫效果

$(".navbar-fixed-top").headroom( {"tolerance" : 5,"offset" : 75,"classes" : {"initial" : "animated","pinned" : "flipInX","unpinned" : "flipOutX"}});

線上示範

Headroom.js外掛程式用法