智能标题
小米自带浏览器有个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>