Headroom.js
下载
Headroom.js 是什么?
Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。
Headroom.js 有什么用?
固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…
大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。
Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来,让用户花更多时间关注你页面上的内容。
工作原理
简单来说,headroom.js 只是为需要响应滚动事件的页面元素增加或删除一个CSS class:
<!-- 初始状态 -->
<header class="headroom"> <!-- 向下滚动时 --> <header class="headroom headroom--unpinned"> <!-- 向上滚动时 --> <header class="headroom headroom--pinned">
通过CSS class的设置,事情变得简单了。所有的控制权就交回到了你的手中,当页面向上或向下滚动时,你就可以通过设置CSS样式来做出自己需要的变化了。
用法
使用 headroom.js 是很简单的。它提供了简单的 JS API,另外,还可以作为 jQuery/Zepto 插件使用。
纯JS调用方式
// 获取页面元素
var myElement = document.querySelector("header"); // 创建 Headroom 对象,将页面元素传递进去 var headroom = new Headroom(myElement); // 初始化 headroom.init();
以 jQuery/Zepto 插件形式调用
// 是不是很简单!
// 注意: init() 默认在插件内部被调用了
$("#header").headroom();
插件还提供了一个 data-* API :
<!-- selects $("[data-headroom]") -->
<header data-headroom>
注意:为了兼容,Zepto 的data module 也需要引入。
参数
Headroom.js 还能接受一个参数对象,用以改变其行为。你可以看一下 Headroom.js 源码中对 Headroom.options
的定义。其 options 对象的结构如下:
{ // 在元素没有固定之前,垂直方向的偏移量(以px为单位)offset : 0, // scroll tolerance in px before state changes tolerance : 0, // 对于每个状态都可以自定义css classes classes : { // 当元素初始化后所设置的class initial : "headroom", // 向上滚动时设置的class pinned : "headroom--pinned", // 向下滚动时所设置的class unpinned : "headroom--unpinned" } }
案例
在 headroom.js playroom 页面可以看到更多使用案例。你甚至还可以调整Headroom.js 的参数来观察不同的效果。
License
Licensed under the MIT License.
转载于:https://www.cnblogs.com/boonya/p/4375636.html
Headroom.js相关推荐
- headroom.js插件使用方法
1.什么是headroom.js? headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间.比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时 ...
- headroom.js_使用Headroom.js创建自动隐藏粘性标题
自动隐藏标题在网页设计中稳定流行了一段时间. 许多博客和在线杂志都使用粘性标头来保持用户的参与度,并让他们直接访问导航 . Medium用基本概念重新定义了此功能 ,该概念在向下滚动时 隐藏导航,而在 ...
- Headroom.js的使用demo
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- Headroom.js 的使用
1.官网链接 headroom官网(中文版):http://www.bootcss.com/p/headroom.js/ headroom官网(国外版):http://wicky.nillia.ms/ ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- Headroom.js插件用法
一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
- headroom.js使用
为页面顶部多留些空间.在不需要页头时将其隐藏 需要添加的css代码 .headroom { transition: transform 200ms linear; } .headroom--pinne ...
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
- 有哪些必看的前端 JS 库?
前端自动化 前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – A ...
最新文章
- arch linux网络配置,关于archlinux网络的 配置
- Oracle Parallel Execution(并行执行) .
- redis install note
- 如何模拟鼠标的拖拽行为.
- Android 第十三课 SharedPreferences存储
- linux文件管理服务,linux系统配置及服务管理_文件管理
- 美丽的窗花java分形_“高冷奇葩”原来冰窗花可以这么美
- 联想电脑Fn热键驱动
- Linux基础知识点总结
- Opencv配置环境变量
- VS2015社区版登录账号后仍然无法使用解决方案
- Word List 01
- 在桌面计算机找不到光盘驱动,如何弹出DVD驱动器,没有按钮,我在计算机中找不到DVD驱动器...
- 智能住宅小区安防报警网络系统
- 算法设计与分析 SCAU17964 水桶打水
- 基于mysql实现的网站_基于JavaScript和MySQL的文化平台网站的设计与实现
- 如何在一个网址中提取到视频链接地址?
- 在excel表格中插入公式
- [项目管理-22]:项目中开环、闭环、安全、监控四种沟通模型:UDP/TCP/SCTP/PID模型
- 几款实用的个人知识管理工具