智能题目 _Web前端

智能标题

小米自带浏览器有个feature很好，下拉时，标题栏会自动隐藏。上拉时，标题栏会显示。

我觉得移动设备上这种设计很必要。特别是在看文章的时候，需要很快的让标题消失。当想看小标题的时候上拉出现屏幕中间章节的小标题。遂写了一个demo，很简单。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	function Static() {
		this.aLotOfWords = 'fasfas<br/>fasfsafsaf<br/>asdfasfasdfs<br/>dfasfsfasf<br/>fdsf<br/>';
		this.chapter = '<div class="chapter"></div>';
		this.status = 0;
		this.lastTop = 0;
		this.totalStatus = 3;
	}
	window.statics = new Static();
	function init() {
		$('#title').html('Title');
		$('#subTitle').hide();
		var wrapper = $('#wrapper');
		for ( var i = 0; i < 14; ++i) {
			var c = $(statics.chapter);
			c.html(statics.aLotOfWords + i);
			c.attr('cname', i);
			wrapper.append(c);
		}
		$('#wrapper').css('top', $('#header').height());
	}
	function scrollHandler() {
		var top = $('body:eq(0)').scrollTop();
		var up = statics.lastTop > top ? true : false;
		changeStatus(up);
		statics.lastTop = top;
		console.log('header' + statics.status);
		$('#header').attr('class', 'header' + statics.status);
		var subTitle = '';
		switch (statics.status) {
		case 0:
		case 1:
			$('#header').css('top', statics.lastTop + 'px');
			var middleOfPage = $(window).height() / 2;
			$('.chapter')
					.each(
							function(i, val) {
								var vTop = $(val).position().top;
								if (vTop < top + middleOfPage
										&& vTop + $(val).height() > top
												+ middleOfPage) {
									subTitle = $(val).attr('cname');
									return false;
								} else {
									return true;
								}
							});
			$('#wrapper').css('top', $('#header').height());
			break;
		case 2:
			$('#wrapper').css('top', 0);
			break;
		}
		assignSubtitle(subTitle);
	}
	function changeStatus(up) {
		if (up) {
			if (statics.status > 0) {
				statics.status -= 1;
			}
		} else {
			if (statics.status < 2) {
				statics.status += 1;
			}
		}
	}
	function assignSubtitle(str) {
		$('#subtitle').text(str);
	}
	$(function() {
		init();
		$(window).scroll(scrollHandler);
	});
</script>
<style type="text/css">
.header0 {
	position: absolute;
	background-color: red;
	font-size: xx-large;
	height: 5em;
	width: 100%;
	z-index: 10;
}

.header1 {
	position: absolute;
	background-color: red;
	font-size: x-large;
	height: 2em;
	width: 100%;
	z-index: 10;
}

.header2 {
	display: none;
}

#wrapper {
	position: relative;
}
</style>
</head>
<body>
	<div id="header" class="header0">
		<span id="title"></span> <span id="subtitle"></span>
	</div>
	<div id="wrapper"></div>
</body>
</html>