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>

コメント

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links

【PostgreSQL】ROWNUMのように行番号(現在行)を取得するROW_NUMBER