2011年06月02日

jQuery:スマートフォンでスクロールに追従するバーを表示する

スマートフォンでヘッダーやフッターはスクロールに追従する方法はあるのですが、
それ以外にスクロールに追従するステータスバーみたいなものを表示させる。
バーの表示される位置は最下部になっており、「-18」となっているところが要素の高さ
になります。


[HTML]

<div id="footerList">ステータスバーです</div>

[js]

document.addEventListener("scroll", showFooter, false);
function showFooter()
{
 var footer = $('#footerList');
 var win = $(window).height();
 var pos = window.scrollY + win - 18;
 footer.css("display", "none");
 footer.css("left", "0px");
 footer.css("top", pos + "px");
 setTimeout(function(){
  footer.css("display", "block");
 }, 1000);
}

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/zasso77/51609762 

トラックバックはまだありません。

コメントはまだありません。

コメントする。

絵文字
 
星  顔