jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.11.28

ページスクロールにサブナビを追従させる

Category:

ページをスクロールするのに合わせてサブナビが追従してくるというUIは、リッチコンテンツなどではよく、企業サイトなどわりと固いページでもたまに見かけるようになりましたが、個人的にはページ全体に常にクドい印象を与えるので好きではありませんでした。

しかし業務上での要件定義に含まれることもあり、また要素の座標を取得してそれを基点にDOMを操作するという練習には持って来いでしたので、試しに書いてみることにしました。

htmlは一般的な2カラム以上のレイアウトになるので割愛するとして、cssではサブナビをfloatではなく絶対配置にします。

#sub {
	position: absolute;
	top: 0;
	right: 0;
}

jsは以下。jqueryにはスクロール時のイベントトリガーとして非常に便利なscroll()メソッドがあるので、思ったよりも簡素になりました。
また、ほとんどないケースだとは思いますが、念のためフッタと被らないようにする処理も加えています。

//変数を定義
var sub = "#sub"; //サブナビの要素を代入

//html全体、サブナビ、フッタそれぞれの高さを代入
var html_height = $("body").innerHeight();
var sub_height = $(sub).innerHeight();
var ft_height = $("#footer").innerHeight();

//サブナビ追従を止める位置を定義
var stop_sub = html_height - (sub_height + ft_height);

//サブナビ上端の位置用
var sub_top = 0;

//関数を定義
//スクロールした際にサブナビの位置を移動させる
var sub_scroll = function (){
	height = $(window).scrollTop();//現在のスクロール位置を代入
	if(height <= 0){
		sub_top = "0";
	} else if(height > stop_sub) {
		sub_top = stop_sub;
	} else {
		sub_top = height;
	}
	$(sub).stop().animate({"top":sub_top},1000,"easeOutExpo");
};

//スクロール時のイベント
$(window).scroll(sub_scroll);

動作のサンプルはこちら
ページスクロールにサブナビを追従させる - jsdo.it

スクロール位置を取得してその値を元にDOMを操作する、というやり方さえ覚えてしまえば、サブナビの移動に限らずもっと様々な演出に応用ができるのではないかと思いました。今後はそのあたりを試していきたいと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.