Headroom.js的使用demo
生活随笔
收集整理的這篇文章主要介紹了
Headroom.js的使用demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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樣式來做出自己需要的變化了。
代碼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><!--測試增加頁面/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;">藍</div><!--測試增加頁面/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>復制代碼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; /*表示動畫執行的時間*/-webkit-animation-fill-mode: both; /*規定動畫在播放前和之后其動畫效果是否可見*/animation-fill-mode: both } ? @-webkit-keyframes slideDown { /*表示勻速地執行動畫*/0% {-webkit-transform: translateY(-46px);} ?100% {-webkit-transform: translateY(0);} } ? .animated.slideDown {-webkit-animation-name: slideDown; /*規定需要綁定到選擇器的 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 }復制代碼總結
以上是生活随笔為你收集整理的Headroom.js的使用demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux（Ubuntu）之free命令
- 下一篇： Electron常见问题 49 - mo