グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

※14/7/9
いくつか問題点？を確認したため記事下部に追記しています。

ようやく旧IEが減ってきて、これで心置きなく position:fixed が使える・・
かと思いきや、スマホでもiOS4以下やAndroid2.X以下は非対応なので、まだしばらくは対策が必要なようです。

そこで、ブラウザが position:fixed に対応しているかを確認できるJSを探してみました。

position:fixedに対応しているかどうか判定する

こちらで紹介されているJSが簡単そうです。


■ダウンロード
GitHubのページに行ってダウンロードします。


■HTMLに記述
HTMLのヘッダー内に記述します。
jQueryを使用しているので、jQueryも忘れずに。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jQuery.support.fixedPosition.js"></script>

■実行
同じくヘッダー内にて実行します。
下記のように書くと、対応していれば「true」、非対応なら「false」が返ってきます。

<script>
$(function(){
    alert($.support.fixedPosition);
});
</script>

※ここから追記

上記の状態でテストしていて気付いたことがありました。

・ページがスクロールバーの出ない長さの場合、非対応でも「true」が返ってくる（iOS4/Android2.X）

・スクリプト実行時にスクロール位置がページ最上部（X=0）の場合、非対応でも「true」が返ってくる（Android2.X）

ちょっとこのままでは十分に使えそうにないので、
何かしら対応できないか試してみようと思います。