Headroom.js插件用法

Posted 2020-09-15 mfmdaoyou

一、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"
	}
});

在线演示