Headroom.js 的使用

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%);
}