過去に同様の質問があったようですが（回答なし）、
１年以上も前のことですので、再度、質問させていただきます。
iPhoneのネイティブアプリで、画面の下に機能ボタンが付いているのをよく見ます。
例えば、最初から付属の電話アプリでいうと、
下にある「よく使う項目、履歴、連絡先、キーパッド、留守番電話」のことです。
これをWebアプリケーションとして、HTML、CSS、Javascriptで表現したいと思います。
スクロールしても常に画面下の位置をキープする仕組み
（電話アプリで言えば、中央の一覧はスクロールするが、画面下のボタンはスクロールしません）を実装したいのです。
解説ページか、実現しているページがあれば教えてください。
iPhoneライクなWeb画面にしてくれるiUIというライブラリは使っています。
http://code.google.com/p/iui/
No.1
1422
226
35pt
CSS の position:fixed; で出来ます。
.fix-bottom { position: fixed; bottom: 0px; }
bottom以外にtop,left,right等の指定をすれば上下左右どこでも画面の同じ場所に固定できます。
No.2
926
35pt
http://groupaware.mobi/iphone/longpage.html
6
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
<title>Fixed Top and Bottom</title>
<meta name="generator" content="BBEdit 8.6">
<style type="text/css" title="text/css">
<!--
html,body
{
margin:0px;
padding:0px;
font-family: Helvetica;
font-size: 20px;
text-align:center;
text-shadow: white 2px 2px;
line-height: 53px;
background-image:url("images/pat.png");
}
#pageBuckett
{
height:800px;
left:0px;
text-align:center;
width:100%;
}
#toolbar
{
background-image:url("images/bkg.png");
background-repeat:repeat;
position:absolute;
top:0px;
height:58px;
width:100%;
visibility:hidden;
}
#footer
{
background-image:url("images/bkgBot.png");
background-repeat:repeat;
position:absolute;
top:360px;
height:58px;
width:100%;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
window.addEventListener("scroll" , pageScrolled ,false );
function loaded() {
document.getElementById("toolbar").style.visibility = "visible";
window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}
function pageScrolled()
{
// alert('scrollY : ' + window.pageYOffset +' scrollX : ' + window.pageXOffset);
document.getElementById("toolbar").style.top = window.pageYOffset + "px";
document.getElementById("footer").style.top = 480 + (window.pageYOffset - 58 - 20 - 44) + "px";
}
//-->
</script>
</head>
<body>
<div id="toolbar">Always On Top</div>
<div id="pageBuckett">
</div>
<div id="footer">Always On Bottom</div>
</body>
</html>
追いかけてくる、というよりは、
1>さんのように、画面下部に張り付いて表示されているようにしたいです。
いい案ありますでしょうか。
2
2
1
<html>
<head>
<title>スクロールしてもブラウザでの表示位置を変えないようにする</title>
<style type="text/css"><!--</p> <p>.imgFix { position:fixed;left:0px; bottom:0px; }</p> <p>p { padding-top:20px; width:320px; height:800px; background-color:yellow; }</p> <p>--></style>
</head>
<body>
ページ内容をスクロールしても上に表示されている画像は固定されたままになります。
</body>
</html>
サーバーに置いてiPhoneで表示させてみましたが、
ページの一番したに表示されました。
これは、mobile Safariでは対応していないのでしょうか。
また、MacのSafariを開発モード（iPhoneシュミレート）で表示させれば
きちんと、スクロールに関わらず、画面の下部に固定表示されました。
ちょっと不思議です。
</div>2010/07/29 20:28:03