1ページで構成されていて、スクロール位置に応じてグローバルナビが点灯するようなサイトを最近よく見かけます。

自分もその仕組みを取り入れたかったので、勉強がてらデモサイトを作りました。

デモサイト

仕組み的には、都度スクロール位置をjsで取得し、点灯するグローバルメニューを判定しています。

1. CSSの調整

CSSに関しては細かい解説はしませんが、ヘッダー固定メニューの場合、下記のようなCSSを記述します。
ただし、position: fixed;は一部のスマホでは未対応のため、幅広くブラウザ対応する場合は別のやり方を考慮する必要があります。

#header {
	position: fixed;
	width: 100%;
	height: 50px;
	top: 0;
	text-align: center;
	background: rgba(180, 180, 180, 0.9);
	border-bottom: 1px solid #ccc;
}

2. ページ内スクロール用jsの記述

jQueryを使っています。下記のような記述です。

$(function() {
	/**
	 * ページ内スクロール
	 */
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - 50;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

3. 点灯表示用のjsを記述

ちょっと長いですが下記のような記述です。
対応するグローバルメニューのクラスに「active」が付与されるようにしています。
activeが付いたらcssで背景色を変えるなど適宜調整してみてください。
変数のバッティングを防ぐのと、汎用性を高めるため無名関数化しています。
実際に使うときは、最初の
// 配列宣言
の箇所を変更するだけで動作するかと思います。

$(function() {

	/**
	 * 現在スクロール位置によるグローバルナビのアクティブ表示
	 */
	var scrollMenu = function() {
		// 配列宣言
		// ここにスクロールで点灯させる箇所のidを記述する
		// 数値は全て0でOK
		var array = {
			'#top': 0,
			'#menu-1': 0,
			'#menu-2': 0,
			'#menu-3': 0,
			'#menu-4': 0,
			'#menu-5': 0
		};

		var $globalNavi = new Array();

		// 各要素のスクロール値を保存
		for (var key in array) {
			if ($(key).offset()) {
				array[key] = $(key).offset().top - 10; // 数値丁度だとずれるので10px余裕を作る
				$globalNavi[key] = $('#header ul li a[href="' + key + '"]');
			}
		}

		// スクロールイベントで判定
		$(window).scroll(function () {
			for (var key in array) {
				if ($(window).scrollTop() > array[key] - 50) {
					$('#header ul li a').each(function() {
						$(this).removeClass('active');
					});
					$globalNavi[key].addClass('active');
				}
			}
		});
	}

	// 実行
	scrollMenu();
});

Tweet