スマートフォンで要素を固定するサンプルです。
対応範囲によってはposition: fixed;でもいいのですが、
iOS4以下やAndroid2.3以下まで対応が必要な場合、JavaScriptでの対応が必要になります。
サンプルコード
HTML、CSSは必要個所の抜粋になりますので、詳しくはデモページをご確認ください。
HTML
1 2 3 4 5 6 7 8 | <div id="page"> <header id="header">ヘッダー</header> <div id="contents"> <div>コンテンツ</div> </div> <footer id="footer">フッター</footer> <div id="under-btn"><a href="">固定要素</a></div></div> |
CSS
1 2 3 4 5 6 | #under-btn { display: none; position: relative; z-index: 9000; width: 100%;} |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // スマホの振り分け用var ua = navigator.userAgent;var isiPhoneMb = (ua.indexOf('iPhone') > -1 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > -1;var isAndroidMb = (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1);var isSp = (isiPhoneMb || isAndroidMb);$(function() { // 固定する要素の指定 var fixElement = $('#under-btn'); // 閲覧端末がスマホのときの処理 if(isSp) { $(window).on('load', function() { // 固定する要素を表示・position指定 fixElement.show().css({ position: 'absolute' }); }); // ページアクセス・スクロール・リサイズ時に固定位置を指定する $(window).on('load scroll resize', function() { elementFix(); }); // 要素を固定する処理 function elementFix() { // 固定する要素の高さ var fixHeight = fixElement.outerHeight(); // 現在のスクロール位置 var scTop = $(window).scrollTop(); // 表示領域の高さ var winHeight = window.innerHeight; // 固定する要素の位置を指定 fixElement.css({ top: scTop + winHeight - fixHeight }); // 固定する要素でフッターが隠れないように余白を作成 $('body').css({ paddingBottom: fixHeight }); } }}); |
デモは手持ちの端末(iOS6.1.6、Android4.4.3、Android2.3.3)で確認しています。
JavaScript17行目の表示領域の高さは、初めは$(window).height() で取得しようとしていたのですが、
iOSではツールバー？の影響か取得したい値がうまく取れませんでした。
色々と取得方法を試してみた結果、window.innerHeightだとうまくいきそうな感じでした。
あとこれは画面下部に固定する方法ですが、上部に固定したい場合も同じやり方でいけると思います。
21行目のtopの値をスクロール位置だけの値にして、(top: scTop)
25行目のbody下部につけている余白を上部につけるように変更(paddingTop: fixHeight)
で、画面上部での固定になります。
探していたスクリプトで参考に使わせていただいています。
但し、URLにhttps://(SSL)が掛かると動作しません。なにか対策はあるのでしょうか？
TOMOさん
コメントありがとうございます。
サンプルページのコードはjQueryの読み込みが「http://…」となっているため、そのまま流用するとSSLページでは読み込まれません。
SSLページでも対応する場合、「http」の部分を省略して、
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
↓
//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
のようにすると、SSLページでもjQueryが読み込まれて動作するかと思います。