eroshigin回答ポイント 70pt

1242084801

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

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

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

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

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

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

y-kawaz2010/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
スター
- eroshigin 2010/07/29 20:28:03
  
  <html>
  
  <head>
  
  <title>スクロールしてもブラウザでの表示位置を変えないようにする</title>
  
  <style type="text/css"></style>
  
  </head>
  
  <body>
  
  aaa
  
  ページ内容をスクロールしても上に表示されている画像は固定されたままになります。
  
  </body>
  
  </html>
  
  サーバーに置いてiPhoneで表示させてみましたが、
  
  ページの一番したに表示されました。
  
  これは、mobile Safariでは対応していないのでしょうか。
  
  また、MacのSafariを開発モード（iPhoneシュミレート）で表示させれば
  
  きちんと、スクロールに関わらず、画面の下部に固定表示されました。
  
  ちょっと不思議です。
  </div>

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

スター

eroshigin 2010/07/29 20:29:42

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

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

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

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

みんなの回答

y-kawaz2010/07/27 17:05:02
満足35pt

eroshigin 2010/07/29 20:28:03

manemaneroom2010/07/27 17:33:27
満足35pt

eroshigin 2010/07/29 20:29:42

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

みんなの回答

y-kawaz2010/07/27 17:05:02 満足35pt

eroshigin 2010/07/29 20:28:03

manemaneroom2010/07/27 17:33:27 満足35pt

eroshigin 2010/07/29 20:29:42

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

y-kawaz2010/07/27 17:05:02
満足35pt

manemaneroom2010/07/27 17:33:27
満足35pt