一、Headroom.js是什么？

Headroom.js是一個(gè)輕量級(jí)、高性能的JS小工具(不依賴(lài)不論什么工具庫(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)航條)能夠方便用戶(hù)在各個(gè)頁(yè)面之間切換。可是這也會(huì)帶來(lái)些問(wèn)題…

大屏幕一般都是寬度大于高度的,也就是說(shuō)屏幕高度要少一些.固定頁(yè)頭會(huì)占用一部分本來(lái)能夠用于展示內(nèi)容的區(qū)域。

小屏幕通常是高度較大,可是別忘了,屏幕本來(lái)就小,頁(yè)頭再占用一部分的話,屏幕可用于展示內(nèi)容的區(qū)域當(dāng)然還是少。

Headroom.js 能幫你把不須要的頁(yè)面元素在合適的時(shí)間展示出來(lái),讓用戶(hù)花很多其它時(shí)間關(guān)注你頁(yè)面上的內(nèi)容。

三、Headroom.js怎樣使用

以下的樣例是基于bootstrap框架和jquery插件的,在bootstrap框架下能夠高速寫(xiě)出導(dǎo)航欄navbar,

然后以jquery插件方式對(duì)導(dǎo)航欄navbar調(diào)用headroom()

1、首先須要引用headroom.js和jquery.headroom.js。

(文件附于演示樣例中)

<script src="js/headroom.js"></script> <script src="js/jquery.headroom.js"></script>
2、通過(guò)css的trasition屬性達(dá)到變換效果。加入例如以下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插件的方式調(diào)用。".navbar-fixed-top"僅僅是用來(lái)獲取導(dǎo)航欄navbar，

也能夠用其它選擇器來(lái)獲取navbar目標(biāo)元素

<script type="text/javascript">$(".navbar-fixed-top").headroom(); </script>上述的效果僅僅是通過(guò)css自帶的trasition屬性來(lái)實(shí)現(xiàn)效果,比較單調(diào)。

能夠結(jié)合animate.css實(shí)現(xiàn)很多其它的美麗的消失和出現(xiàn)的效果。(查看效果)

animate.css使用純css為各種元素實(shí)現(xiàn)不同的動(dòng)畫(huà)效果，每一種class相應(yīng)一種動(dòng)畫(huà)效果,

所以將animate.css引入代碼后headroom()能夠直接使用已經(jīng)寫(xiě)好的class。

(animate.css下載)

引入animate.css作為效果之后能夠使用例如以下參數(shù)實(shí)現(xiàn)動(dòng)畫(huà)效果

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

在線演示

總結(jié)

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

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