iOSやAndroidに搭載されているモバイルSafariではposition:fixedが利用できません。
position:fixedを再現するためにはjavascriptを使うのが楽ちんです。javascriptのライブラリではYUIや有料版のSencha Touchというものがあるらしいですが、今回はiscroll.jsを利用します。

まずはじめに

iscroll公式サイトから最新版のiscroll.jsをダウンロードします。

jsの読み込み

<script type="application/javascript" src="iscroll.js"></script>

iscroll.jsのみ利用する場合はjquery等のライブラリは必要ありません。

iscroll.jsを利用するためのjsタグ

公式サイトでは基本的な利用タグが紹介されています。

<script type="text/javascript">
var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

しかし上記のまま利用しようとすると、inputタグが利用できなくなってしまうという不具合が起こります。
そんなときは、下記のコードを利用すれば解消されます。

var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper', {
		useTransform: false,
		onBeforeScrollStart: function (e) {
			var target = e.target;
			while (target.nodeType != 1) target = target.parentNode;
			if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
				e.preventDefault();
		}
	});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

これでiPhoneでもAndroidでもposition:fixedを再現できますね!