Headroom.js插件用法

一、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插件用法相关推荐

Toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
headroom.js插件使用方法
1.什么是headroom.js? headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间.比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时 ...
fullPage.js插件用法（转发）
fullPage.js主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速 ...
Headroom.js
下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
鼠标移动响应php程序,jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】...
本文实例讲述了jQuery实现的响应鼠标移动方向插件用法.分享给大家供大家参考,具体如下: HTML代码如下: www.jb51.net jQuery响应鼠标移动 *{margin:0;padding ...
简约好用的日期时间选择js插件
今天找到了一个比较好用的日期时间选择js插件,安利给大家这个插件是zepto.mtimer.js 特别好用的时间日期选择器,用来给网页增光添彩`在这里插入代码片是个不错的选择这个控件对于特定的日期 ...

Headroom.js插件用法

Headroom.js插件用法相关推荐

最新文章

热门文章