iPhone iPadで「position: fixed」を実現するiScroll « オモテメン（高山一登のブログ）

3日に書いたiPad readyの記事で紹介したNikeのサイトがヘッダーを固定していたのでてっきりiPadはiPhoneで使えなかったCSSの「position: fixed」が使えるのかなと思ったらやっぱりiPadでも「position: fixed」は使えなくて、代わりに「iScroll」というJavaScriptライブラリで実現していたと知ってびっくり。 これを使えばiPhoneでも「position: fixed」に相当するデザインを実現できそうです。デモはこちら ただしこれを使うと、逆に通常のブラウザではスクロールできなくなるので注意が必要です。上のデモもPCでは機能しません。 使い方は簡単で、JS読み込んでスクロールさせるdivにIDつけて、その親divにもIDつけてあとCSS指定するだけ。詳しくはデモのソースを見れば分かります。2つのdivの間に違う要素が入るとダメみた

[hisasann]

「もともとPCのブラウザはWindowとViewportをほぼ同じものとしてレンダリングしているけど、iPhone・iPadではあくまでViewportに対して「position: fixed」していて、Viewport自体はWindowの中にレンダリングされているので、Windowに対して

[sylvan_l]

ナイキのサイトで使ってる

[takeru-c]

iPhoneでposition: fixedする方法

[saladdays]

iPhoneでposition:fixed