目次自動ハイライト

/*サイドバースクロール目次(id="toc-4")のliタグ(class="current")へ*/
#toc-4 li.current {
	background-color: #ff9244;  /* ハイライト色 */
}

$(function() {  //予約関数(HTMLが全て読み込まれてから実行)
	
	// サイドバースクロール目次(id="toc-4")の
	// 見出しアンカーリンクタグ(liタグ内のaタグ)を全て取得
	const headerLinks = $('#toc-4 li a');
	
	// コンテンツの位置(top, botttom)情報の配列作成
	let contentsPos = new Array();
	
	// contentsPos の初期化関数
	function init() {
		for (let i = 0; i < headerLinks.length; i++) {
			// 見出し i のリンク先idを取得
			const headerID = headerLinks.eq(i).attr('href');
			// コンテンツ i の先頭位置
			const top = $(headerID).offset().top;
			// コンテンツ i の終了位置(暫定的に null )
			const bottom = null;
			// 配列として格納
			contentsPos[i] = { top: top, bottom: bottom };
			
			// コンテンツの下部の位置を調整
			if (i > 0) {
				// 前のコンテンツの終了位置 = 今のコンテンツの先頭位置
				contentsPos[i - 1].bottom = top;
			}
		};
		// footerの先頭位置を取得
		const footerTop = $("footer").offset().top;
		// 最後のコンテンツの終了位置 = footerの先頭位置
		contentsPos[contentsPos.length - 1].bottom = footerTop;
	}
	
	// 現在位置を確認してコンテンツ位置に対応
	function currentCheck() {
		// 現在のサイト上部からの位置を取得
		const windowScrollTop = $(window).scrollTop();
		const windowsCenter = window.innerHeight / 2;
		// 一旦全マークを解除
		headerLinks.parent().removeClass('current');
		
		// 現在位置が全コンテンツ内にあるかチェック
		if (contentsPos[0].top <= windowScrollTop + windowsCenter && contentsPos[contentsPos.length - 1].bottom > windowScrollTop + windowsCenter) {
			for (let i = 0; i < contentsPos.length; i++) {
				// 現在位置がコンテンツ i 内にあるかチェック
				if (contentsPos[i].top <= windowScrollTop + windowsCenter && contentsPos[i].bottom > windowScrollTop + windowsCenter) {
					// class = "current"を aタグの親である li タグに設定
					headerLinks.eq(i).parent().addClass('current');
					break;
				}
			}
		}
	}
	
	//ここからメイン
	
	// 初期化の実行
	init();
	
	// ロード・スクロール時に見出しをマーク更新
	$(window).on('load scroll', currentCheck);
	
	// アコーディオンが開閉したら座標更新
	$(document).on('change', 'input.toggle-checkbox', function() {
		setTimeout(init, 350);
	});
	
	// 目次が開閉したら座標更新
	$(document).on('change', 'input.toc-checkbox', function() {
		setTimeout(init, 550);
	});

});