iphone で position:fixed を使う方法

iScrollを使うことで実現することができます。

iScroll: http://cubiq.org/iscroll

iphone では、position:fixed の css を使うことができないため、
Javascript にて制御します。
使い方は、以下のようなjsをheadに書きます。

 function setHeight() {

    var headerH = document.getElementById('header').offsetHeight,

       wrapperH = window.innerHeight - headerH;

       document.getElementById('wrapper').style.height = wrapperH + 'px';

 }

 window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);

 function loaded() {

    setHeight();

 }

 document.addEventListener('DOMContentLoaded', loaded, false);

 

 var myScroll;

 function loaded() {

    setHeight();

    myScroll = new iScroll('scroller', {desktopCompatibility:true});

 }

 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

そして、以下のようにhtmlをくむのみ。

...js...



＜div id="wrapper"＞

 ＜div id="scroller"＞

 ... scroller ... ここにスクロールさせるコンテンツを置く

 ＜/div＞

＜/div＞

css は以下のような感じ

#wrapper {

	position:relative;

	z-index:1;

	width:100% ;

	overflow:hidden;

}

うまいことできずにかなり苦労しました。。。
これははじめに組んでおいた方が良いものですね。。