一、Headroom.js是什么?

Headroom.js是一个轻量级、高性能的JS小工具(不依赖不论什么工具库。),它能在页面滚动时做出响应。

此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。

二、Headroom.js有什么用?

固定页头(导航条)能够方便用户在各个页面之间切换。可是这也会带来些问题…

大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些.固定页头会占用一部分本来能够用于展示内容的区域。

小屏幕通常是高度较大,可是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。

Headroom.js 能帮你把不须要的页面元素在合适的时间展示出来,让用户花很多其它时间关注你页面上的内容。

三、Headroom.js怎样使用

以下的样例是基于bootstrap框架和jquery插件的,在bootstrap框架下能够高速写出导航栏navbar,

然后以jquery插件方式对导航栏navbar调用headroom()

1、首先须要引用headroom.js和jquery.headroom.js。

(文件附于演示样例中)

<script src="js/headroom.js"></script>
<script src="js/jquery.headroom.js"></script>

2、通过css的trasition属性达到变换效果。加入例如以下CSS

<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>

3、之后加入以下的js代码,使用jquery插件的方式调用。".navbar-fixed-top"仅仅是用来获取导航栏navbar,

也能够用其它选择器来获取navbar目标元素

<script type="text/javascript">
$(".navbar-fixed-top").headroom();
</script>

上述的效果仅仅是通过css自带的trasition属性来实现效果,比較单调。

能够结合animate.css实现很多其它的美丽的消失和出现的效果。(查看效果)

animate.css使用纯css为各种元素实现不同的动画效果,每一种class相应一种动画效果,

所以将animate.css引入代码后headroom()能够直接使用已经写好的class。

(animate.css下载)

引入animate.css作为效果之后能够使用例如以下參数实现动画效果

$(".navbar-fixed-top").headroom( {
"tolerance" : 5,
"offset" : 75,
"classes" : {
"initial" : "animated",
"pinned" : "flipInX",
"unpinned" : "flipOutX"
}
});

在线演示

Headroom.js插件用法的更多相关文章

  1. toastr.js插件用法

    toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...

  2. 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

    Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...

  3. fullPage.js插件用法(转发)

    fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...

  4. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  5. 网站引导页插件intro.js 的用法

    intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...

  6. Headroom.js

    下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...

  7. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  8. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  9. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

随机推荐

  1. C#通过http post方式调用需要证书的webservice

    前一段时间做花旗银行的项目,用到花旗的接口是websevice,由于很多原因直接在项目中引用webservice不成功,于是就用了http post方式请求,把请求信息(xml格式)组装之后发送到服务 ...

  2. 大数据学习——KETTLE入门学习——kettle安装

    https://blog.csdn.net/u012637358/article/details/82593492 下载的kettle是汉化的 改成英文的 工具——选项——选择英文

  3. Leetcode 481.神奇字符串

    神奇字符串 神奇的字符串 S 只包含 '1' 和 '2',并遵守以下规则: 字符串 S 是神奇的,因为串联字符 '1' 和 '2' 的连续出现次数会生成字符串 S 本身. 字符串 S 的前几个元素如下 ...

  4. ssh免密码登录远程服务器(不采用securecrt登录)

      http://blog.csdn.net/leexide/article/details/17252369       Linux/UNIX下使用ssh-keygen设置SSH无密码登录 标签:  ...

  5. codeM预赛

    [编程|1000分] 音乐研究 时间限制:1秒空间限制:32768K 题目描述 美团外卖的品牌代言人袋鼠先生最近正在进行音乐研究.他有两段音频,每段音频是一个表示音高的序列.现在袋鼠先生想要在第二段音 ...

  6. Spring c3p0连接池通过Hibernate配置

    首先进行Hibernate配置,详见http://www.cnblogs.com/claricre/p/6509931.html 然后调用这三个包. 配置hibernate.cfg.xml文件: &l ...

  7. 许式伟看 Facebook 发币(上): 区块链, 比特币与 Libra 币

    你好,我是七牛云许式伟. Facebook(脸书)于6月18日发布了其加密数字货币项目白皮书.该数字货币被命名为 Libra(天秤座),象征着平衡与公正.此前,BBC 报道说这个数字货币叫 Globa ...

  8. 【bzoj2563】阿狸和桃子的游戏 贪心

    题目描述 阿狸和桃子正在玩一个游戏,游戏是在一个带权图G=(V, E)上进行的,设节点权值为w(v),边权为c(e).游戏规则是这样的:1. 阿狸和桃子轮流将图中的顶点染色,阿狸会将顶点染成红色,桃子 ...

  9. BZOJ2527 [Poi2011]Meteors 【整体二分 + 树状数组】

    题目 Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1份相邻),第i份上有第Ai个国家的太空站. 这个星球经常会下 ...

  10. d3 添加元素相关api

    选择元素 d3.select([dom]) d3.selectAll([dom]) 添加元素 d3.select("body").append("p") 插入内 ...