スマートフォンで要素を画面下部に固定(追従)する

スマートフォンで要素を固定するサンプルです。
対応範囲によってはposition: fixed;でもいいのですが、
iOS4以下やAndroid2.3以下まで対応が必要な場合、JavaScriptでの対応が必要になります。

サンプルコード

HTML、CSSは必要個所の抜粋になりますので、詳しくはデモページをご確認ください。

HTML

<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

#under-btn {
	display: none;
	position: relative;
	z-index: 9000;
	width: 100%;
}

JavaScript

// スマホの振り分け用
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)
で、画面上部での固定になります。