2011年9月20日火曜日

iPad(iOS)で要素を固定(Position:fixed)を何とかする

iPad, iPhoneではcssのposition:fixedが効かない。これは仕様らしい。これを何とかするにはJavaScriptを使う必要がある。

jQueryを使って簡易的に対応するのは下記のような感じ。

var jMenu = $('#main-menu');
var menuTop = jMenu.position().top;
$(window).scroll(function() {
    jMenu.css('top', $(this).scrollTop() + menuTop + "px");
});

jQuery Scroll Followを使うと綺麗に動いてくれる。

iScrollを使うとposition: fixedっぽく出来るけど、これはscrollするcontentsを指定するので、「この要素だけposition:fixedにしたい」という指定は出来ない(たぶん)。

 

< Related Posts>

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives