最新消息:

第103款插件:Headroom.js在不需要页头时将其隐藏

高级页面 杨红伟 2543浏览

突然在看网页时,想:下拉页面时菜单关闭,向上拉时菜单显示。这会不会很有用户体验呢?网上搜索,Headroom.js正好符合!于是研究之!

一:插件简介

headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间。比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时候又出现。

用时一定要注意:首先需要引用headroom.js和jQuery.headroom.js。将以下的代码加入到你的代码中。

headroom.js作用:感应元素不同的状态为之更改相应的class。

jQuery.headroom.js作用:提供jquery插件方式和Data-API方式调用headrooom()。

心急的用户可直接看第六点。

一开始以为很简单,结果花了将近一上午和一中午的时间,才搞清楚,才总结出来这篇文章,其中有很多值得注意的地方!

为什么呢?注意的以下几点:

1、github上的src下的Headroom.js(第一个字母是大写)是个错误的,而 jQuery.headroom.js 是正确的,没有问题的;

2、网址示例http://wicky.nillia.ms/headroom.js/源代码中的main.js中有好几个插件,其中有一个插件是headroom.js,是v0.3而不是最新版v0.8。于是我总结出来了headroom.v0.3.js和headroom.v0.8.js两个插件。但目前还是建议用v0.7的,网址分别是:

http://cdn.bootcss.com/headroom/0.7.0/headroom.js

http://cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js

3、headroom.js必须放在jquery插件之后;

4、headroom.js单一插件使用后,可用 headroom.init(); 这个功能;

5、Headroom.js加jQuery.headroom.js 两个插件一起使用,才可用 $(“#header”).headroom(); 这个功能。

明白了以上注意点后,才可以熟练的运用此插件!!!

二:下载及演示

1、官方

最新版:v0.8.0 (2016-03-16)

作者:WickyNilliams

插件官网:http://wicky.nillia.ms/headroom.js/

下载地址:https://www.github.com/WickyNilliams/headroom.js

注:github中src/Headroom.js是不能用的,一事实上要谨慎不用!

2、CDN下载及演示

翻译官网网址:http://www.bootcss.com/p/headroom.js/

注:可能翻译的是旧版,不全面

bootcdn引用地址: http://www.bootcdn.cn/headroom/

注:此CDN都可以使用!这个CDN还是挺靠谱的!而且有不同版本插件引用。

3、本站下载及演示(杨红伟总结)

本站演示地址:http://www.ijquery.cn/demo/headroom

本站下载地址:http://git.oschina.net/hongweizhiyuan/headroom.js

杨红伟翻译地址: 暂无

杨红伟总结headroom.v0.3.js地址:http://www.ijquery.cn/demo/headroom/headroom.v0.3.js

杨红伟总结headroom.v0.8.js地址:http://www.ijquery.cn/demo/headroom/headroom.v0.8.js

三:jQuery适应性

版本:1.2.3以下(就是所有版本都可用)

四:安装

Git安装:

git clone https://github.com/WickyNilliams/headroom.js

OSC Git安装:

git clone http://git.oschina.net/hongweizhiyuan/headroom.js

注:不能通过bower、npm安装。

五:参数介绍

V0.8的插件比较多,包括如下部分

{
   // 在元素没有固定之前,垂直方向的偏移量(以px为单位)
   offset : 0,
   // 在状态改变前滚动的公差(以px为单位)
   tolerance : 0,
   // 你可以指定公差,是向上滚动还是向上滚动
   tolerance : {
       up : 5,
       down : 0
   },

   // css类的应
   classes : {
       // 当元素初始化后所设置的class
       initial : "headroom",
       // 向上滚动时设置的class
       pinned : "headroom--pinned",
       // 向下滚动时所设置的class
       unpinned : "headroom--unpinned",
       // 向上偏移的class
       top : "headroom--top",
       // 向下偏移的class
       notTop : "headroom--not-top",
       // 滚动区域的底部
       bottom : "headroom--bottom",
       // 不在滚动区域的底部
       notBottom : "headroom--not-bottom"
   },

   // 监听滚动事件的元素,默认为 `window`
   scroller : someElement,
   // 被固定时的回调事件, `this` 是headroom的对象
   onPin : function() {},
   // 当放开的回调事件, `this` 是 headroom的对象
   onUnpin : function() {},
   // 上边偏移量的回调事件, `this` 是 headroom的对象
   onTop : function() {},
   // 下边偏移量的回调事件, `this` 是 headroom的对象
   onNotTop : function() {},
   // 在页面询问的回调事件, `this` 是 headroom的对象
   onBottom : function() {},
   // 从页面底部移开的回调事件, `this` 是 headroom的对象
   onNotBottom : function() {}
}

六:最简使用教程

jquery版演示地址: http://www.ijquery.cn/demo/headroom/demo1.html

HTML代码:

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<title>Headroom.js</title>
		<meta name="viewport" content="width=device-width">
		<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="demo1.css">
	</head>

	<body>

		<header id="header" class="header header--fixed">
			Headroom.js
		</header>

		<!--测试增加页面/start-->
		<div style="height:1000px;background: #FF0000;color:#FFFFFF;padding-top:46px;text-align: center;font-size: 60px;">红</div>
		<div style="height:1000px;background: #00FF00;color:#FFFFFF;text-align: center;font-size: 60px;">绿</div>
		<div style="height:1000px;background: #0000FF;color:#FFFFFF;text-align: center;font-size: 60px;">蓝</div>
		<!--测试增加页面/end-->

		<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/headroom.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>

		<script>
			$(function() {
				$("#header").headroom({
					tolerance: 5,
					offset: 205,
					classes: {
						initial: "animated",
						pinned: "slideDown",
						unpinned: "slideUp"
					}
				});
			})
		</script>

	</body>

</html>

CSS代码:

.header {
	background-color: #292f36;
	height:46px;
	line-height: 46px;
	color: #FFFFFF;
	padding: 0 1.5em;
	text-align: center;
}

.header--fixed {
	position: fixed;
	z-index: 10;
	right: 0;
	left: 0;
	top: 0
}

.animated {
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	-o-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-4em)
	}

	100% {
		-webkit-transform: translateY(0)
	}
}

@-moz-keyframes slideDown {
	0% {
		-moz-transform: translateY(-4em)
	}

	100% {
		-moz-transform: translateY(0)
	}
}

@-o-keyframes slideDown {
	0% {
		-o-transform: translateY(-4em)
	}

	100% {
		-o-transform: translateY(0)
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-4em)
	}

	100% {
		transform: translateY(0)
	}
}

.animated.slideDown {
	-webkit-animation-name: slideDown;
	-moz-animation-name: slideDown;
	-o-animation-name: slideDown;
	animation-name: slideDown
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-4em)
	}
}

@-moz-keyframes slideUp {
	0% {
		-moz-transform: translateY(0)
	}

	100% {
		-moz-transform: translateY(-4em)
	}
}

@-o-keyframes slideUp {
	0% {
		-o-transform: translateY(0)
	}

	100% {
		-o-transform: translateY(-4em)
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-4em)
	}
}

.animated.slideUp {
	-webkit-animation-name: slideUp;
	-moz-animation-name: slideUp;
	-o-animation-name: slideUp;
	animation-name: slideUp
}

注:js版演示地址: http://www.ijquery.cn/demo/headroom/demo2.html