ブラウザが position:fixed に対応しているか確認するJS
2014.07.09
※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)

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

コメントする

※JavaScriptが有効になっている必要があります




月別アーカイブ