スマートタイトル
3174 ワード
小米はブラウザを持っていてfeatureがいいです.ドロップダウンすると、タイトルバーが自動的に隠されます.上に引っ張ると、タイトルバーが表示されます.
モバイル機器にはこのような設計が必要だと思います.特に文章を読むときは、すぐにタイトルを消す必要があります.タイトルを見たいときは、画面の真ん中の章のタイトルを引いて表示します.それでdemoを書きました.簡単です.
モバイル機器にはこのような設計が必要だと思います.特に文章を読むときは、すぐにタイトルを消す必要があります.タイトルを見たいときは、画面の真ん中の章のタイトルを引いて表示します.それで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>