Headroom.js 的使用

本文介绍了如何使用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%);
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴小花的博客

1分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值