人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://q.hatena.ne.jp/1242084801
過去に同様の質問があったようですが(回答なし)、
1年以上も前のことですので、再度、質問させていただきます。



iPhoneのネイティブアプリで、画面の下に機能ボタンが付いているのをよく見ます。

例えば、最初から付属の電話アプリでいうと、
下にある「よく使う項目、履歴、連絡先、キーパッド、留守番電話」のことです。



これをWebアプリケーションとして、HTML、CSS、Javascriptで表現したいと思います。
スクロールしても常に画面下の位置をキープする仕組み
(電話アプリで言えば、中央の一覧はスクロールするが、画面下のボタンはスクロールしません)を実装したいのです。



解説ページか、実現しているページがあれば教えてください。

iPhoneライクなWeb画面にしてくれるiUIというライブラリは使っています。
http://code.google.com/p/iui/


●質問者: eroshigin
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML iPhone JavaScript Web
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント

CSS の position:fixed; で出来ます。

.fix-bottom {
 position: fixed;
 bottom: 0px;
}

bottom以外にtop,left,right等の指定をすれば上下左右どこでも画面の同じ場所に固定できます。

http://q.hatena.ne.jp/answer

◎質問者からの返答

<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>

aaa

ページ内容をスクロールしても上に表示されている画像は固定されたままになります。

</body>

</html>

サーバーに置いてiPhoneで表示させてみましたが、

ページの一番したに表示されました。

これは、mobile Safariでは対応していないのでしょうか。

また、MacのSafariを開発モード(iPhoneシュミレート)で表示させれば

きちんと、スクロールに関わらず、画面の下部に固定表示されました。

ちょっと不思議です。

</div>
2 ● manemaneroom
●35ポイント

http://groupaware.mobi/iphone/longpage.html

<!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>さんのように、画面下部に張り付いて表示されているようにしたいです。

いい案ありますでしょうか。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ