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

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



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

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



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



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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/07/27 15:20:20
  • 終了:2010/07/31 03:37:01

回答(2件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252010/07/27 17:05:02

ポイント35pt

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

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

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

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

id:eroshigin

<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>2010/07/29 20:28:03
id:manemaneroom No.2

manemaneroom回答回数92ベストアンサー獲得回数62010/07/27 17:33:27

ポイント35pt

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>

id:eroshigin

追いかけてくる、というよりは、

1>さんのように、画面下部に張り付いて表示されているようにしたいです。

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

2010/07/29 20:29:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません