Headroom.js 的使用

最新推荐文章于 2024-08-10 08:01:39 发布

吴小花的博客

最新推荐文章于 2024-08-10 08:01:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端开发

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/88970307

Web前端开发专栏收录该内容

43 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用Headroom.js库来实现一种交互效果：当页面向下滚动时导航条消失，向上滚动时重新出现。提供了Headroom.js的中文官网、原始官网、在线使用地址及Playroom供开发者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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