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; }) });