1.官網(wǎng)鏈接

headroom官網(wǎng)(中文版)：http://www.bootcss.com/p/headroom.js/
headroom官網(wǎng)(國外版)：http://wicky.nillia.ms/headroom.js/
headroom在線使用地址：https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js
headroom–Playroom:http://wicky.nillia.ms/headroom.js/playroom/
想實(shí)現(xiàn)這樣的效果嗎（當(dāng)頁面向下滾動(dòng)時(shí)，導(dǎo)航條消失，當(dāng)頁面向上滾動(dòng)時(shí)，導(dǎo)航條就出現(xiàn)了。）
2.代碼：

Jscript部分

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

css部分

.headroom {will-change: transform;transition: transform 200ms linear; } .headroom--pinned {transform: translateY(0%); } .headroom--unpinned {transform: translateY(-100%); }

?

總結(jié)

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

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