R4

Webサービス レビュー * R4  

ナビゲーションをスクロールの途中でヘッダーに固定する方法

2012年8月18日 Tag:JavaScript Text by 伊藤

このエントリーをはてなブックマークに追加

最初からヘッダーに固定するタイプではなく、スクロールしていく途中で、ヘッダーが固定される方法の紹介です。ANTEPRIMAIWCなど、多くのWebサイトで使われています。

<script src="jquery.js"></script>
<script>
$(function(){
hTop = $('#header').offset().top;
});
$(window).scroll(function () {
if($(window).scrollTop() > hTop - 0) {
$('#header').css('position', 'fixed');
$('#header').css('top', '0px');
}else{
$('#header').css('position', 'static');
}
});
</script>

#header に固定したいナビゲーションが含まれるものとします。ページ先頭から #header までの位置を変数 hTop に代入して、その位置までスクロールすると、#header を fixed する、という仕組みです。#header までスクロールが戻ったら static しておけば、また元の位置に戻ります。fixed するので、必要に応じて css を調整してください。

※ご利用は自己責任でお願いします。

Latest

Pickup

Category

koyomi

4db

Twitter