読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

シングルページでナビゲーションをカレント表示するjQuery

jQueryプラグイン

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta  charset="utf-8">
<title>カレントjQuery</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
	<div id="header">
			<ul id="nav">
				<li><a href="#contents01">コンテンツA</a></li>
				<li><a href="#contents02">コンテンツB</a></li>
				<li><a href="#contents03">コンテンツC</a></li>
				<li><a href="#contents04">コンテンツD</a></li>
			</ul>
	</div>
	<div id="content">
			<div id="contents01">
				<h2>コンテンツA</h2>
				コンテンツAの領域
			</div>
			<div id="contents02">
				<h2>コンテンツB</h2>
				コンテンツBの領域
			</div>
			<div id="contents03">
				<h2>コンテンツC</h2>
				コンテンツCの領域
			</div>
			<div id="contents04">
				<h2>コンテンツD</h2>
				コンテンツDの領域
		      </div>
	</div>
</div>
</body>
</html>


style.css

/* CSSリセット */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}

#container {
	position: relative;
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
#header {
     width: 960px;
     margin: 0 auto;
	position: fixed;
     padding: 20px 0;
	z-index: 200;
	text-align: center;
	background: #3F9;
}
#header #nav li {
	float: left;
	padding-left: 20px;
}
#header #nav li a {
	color: #666666;
	text-decoration: none;
}
#header #nav li a.current {
	color: #000000;
	text-decoration: underline;
}
#content {
	position: relative;
	z-index: 100;
	width: 100%;
}
#contents01, #contents02, #contents03, #contents04  {
  height: 1000px;
}
#contents01 {
  background-color: #C63;
}
#contents02 {
  background-color: #39F;
}
#contents03 {
  background-color: #999;
}
#contents04 {
  background-color: #939;
}
h2 {
  padding-top: 90px;
}


script.js

// JavaScript Document

$(function() {
	// ナビゲーションのリンクを指定
	var navLink = $('#nav li a');

	// 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく
	var contentsArr = new Array();
	for (var i = 0; i < navLink.length; i++) {
		// コンテンツのIDを取得
		var targetContents = navLink.eq(i).attr('href');
		// ページ内リンクでないナビゲーションが含まれている場合は除外する
		if(targetContents.charAt(0) == '#') {
			// ページ上部からコンテンツの開始位置までの距離を取得
			var targetContentsTop = $(targetContents).offset().top;
			// ページ上部からコンテンツの終了位置までの距離を取得
			var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;
			// 配列に格納
			contentsArr[i] = [targetContentsTop, targetContentsBottom]
		}
	};

	// 現在地をチェックする
	function currentCheck() {
		// 現在のスクロール位置を取得
		var windowScrolltop = $(window).scrollTop();
		for (var i = 0; i < contentsArr.length; i++) {
			// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
			if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
				// 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
				navLink.removeClass('current');
				navLink.eq(i).addClass('current');
				i == contentsArr.length;
			}
		};
	}

	// ページ読み込み時とスクロール時に、現在地をチェックする
	$(window).on('load scroll', function() {
		currentCheck();
	});

	// ナビゲーションをクリックした時のスムーズスクロール
	navLink.click(function() {
		$('html,body').animate({
			scrollTop: $($(this).attr('href')).offset().top
		}, 300);
		return false;
	})
});