1.官網鏈接

headroom官網(中文版)：http://www.bootcss.com/p/headroom.js/
headroom官網(國外版)：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/
想實現這樣的效果嗎（當頁面向下滾動時，導航條消失，當頁面向上滾動時，導航條就出現了。）
2.代碼：

Jscript部分

<script src="/Theme/default/js/headroom.min.js"></script> <script>// 獲取頁面元素var myElement = document.querySelector(".header");// 創建 Headroom 對象，將頁面元素傳遞進去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%); }

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。