Headroom.js的使用demo
Headroom.js 是什么？
Headroom.js 是一個(gè)輕量級(jí)、高性能的JS小工具（不依賴任何工具庫！），它能在頁面滾動(dòng)時(shí)做出響應(yīng)。此頁面頂部的導(dǎo)航條就是一個(gè)鮮活的案例，當(dāng)頁面向下滾動(dòng)時(shí)，導(dǎo)航條消失，當(dāng)頁面向上滾動(dòng)時(shí)，導(dǎo)航條就出現(xiàn)了。
Headroom.js 有什么用？
固定頁頭（導(dǎo)航條）可以方便用戶在各個(gè)頁面之間切換。但是這也會(huì)帶來些問題…
大屏幕一般都是寬度大于高度的，也就是說屏幕高度要少一些。固定頁頭會(huì)占用一部分本來可以用于展示內(nèi)容的區(qū)域。小屏幕一般是高度較大，但是別忘了，屏幕本來就小，頁頭再占用一部分的話，屏幕可用于展示內(nèi)容的區(qū)域當(dāng)然還是少。
Headroom.js 能幫你把不需要的頁面元素在合適的時(shí)間展示出來，讓用戶花更多時(shí)間關(guān)注你頁面上的內(nèi)容。
工作原理
簡(jiǎn)單來說，headroom.js 只是為需要響應(yīng)滾動(dòng)事件的頁面元素增加或刪除一個(gè)CSS class
<!-- 初始狀態(tài) --> <header class="headroom"> ? <!-- 向下滾動(dòng)時(shí) --> <header class="headroom headroom--unpinned"> ? <!-- 向上滾動(dòng)時(shí) --> <header class="headroom headroom--pinned">復(fù)制代碼通過CSS class的設(shè)置，事情變得簡(jiǎn)單了。所有的控制權(quán)就交回到了你的手中，當(dāng)頁面向上或向下滾動(dòng)時(shí)，你就可以通過設(shè)置CSS樣式來做出自己需要的變化了。
代碼demo 你要自己下載Headroom.js并引入
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8"><title>Headroom.js</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="headroom.css" type="text/css"><!--<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">--><!--<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>--><script src="headroom.js" type="text/javascript"></script><!--<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>--> </head> <body><header id="header" class="header header--fixed">Headroom.js</header><!--測(cè)試增加頁面/start--><div style="height:1000px;background: #FF0000;color:#FFFFFF;padding-top:46px;text-align: center;font-size: 60px;">紅</div><div style="height:1000px;background: #00FF00;color:#FFFFFF;text-align: center;font-size: 60px;">綠</div><div style="height:1000px;background: #0000FF;color:#FFFFFF;text-align: center;font-size: 60px;">藍(lán)</div><!--測(cè)試增加頁面/end--><script>var header = document.querySelector("header");var headroom = new Headroom(header, {tolerance: 5,offset: 205,classes: {initial: "animated",pinned: "slideDown",unpinned: "slideUp"}});headroom.init(); ? //jquery的使用方式 // $(function() { // $("#header").headroom({ // tolerance: 5, // offset: 205, // classes: { // initial: "animated", // pinned: "slideDown", // unpinned: "slideUp" // } // }); // })</script> </body> </html>復(fù)制代碼css樣式：
*{margin: 0;padding: 0; } .header {background-color: #292f36;height:46px;line-height: 46px;color: #FFFFFF;padding: 0 1.5em;text-align: center; } ? .header--fixed {position: fixed;z-index: 10;right: 0;left: 0;top: 0 } ? .animated {-webkit-animation-duration: .5s; /*表示動(dòng)畫執(zhí)行的時(shí)間*/-webkit-animation-fill-mode: both; /*規(guī)定動(dòng)畫在播放前和之后其動(dòng)畫效果是否可見*/animation-fill-mode: both } ? @-webkit-keyframes slideDown { /*表示勻速地執(zhí)行動(dòng)畫*/0% {-webkit-transform: translateY(-46px);} ?100% {-webkit-transform: translateY(0);} } ? .animated.slideDown {-webkit-animation-name: slideDown; /*規(guī)定需要綁定到選擇器的 keyframe 名稱。。*/animation-name: slideDown } ? @-webkit-keyframes slideUp {0% {-webkit-transform: translateY(0);} ?100% {-webkit-transform: translateY(-46px);} } ? .animated.slideUp {-webkit-animation-name: slideUp;animation-name: slideUp }復(fù)制代碼總結(jié)
以上是生活随笔為你收集整理的Headroom.js的使用demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux（Ubuntu）之free命令
- 下一篇： Electron常见问题 49 - mo