jQueryを使ったjsの綺麗な書き方について

いつもお世話になっております。
今回はjsの正しい書き方についてお聞きしたく、ご質問をさせていただきます、

現状

ヘッダーが追従ナビゲーションになっており、スクロールするとナビゲーションに
カレントclassが付与される仕組みです。
動作の方は問題なく動いております。

問題点

jsの書き方が冗長であるため、どのように、記述すれば綺麗にかけますでしょうか。
自分にとっての難点が、メニューにない部分はカレントclassを付けないため、メニューの関係無いスクロール量の場合は
カレントを消すようにしています。ここの部分の書き方が冗長的です。また、.eq(n)でclassを与えてるため、メニューが
増えたり減ったりした場合、番号をずらさないといけないため、応用が効かない書き方とも思っています。

無駄のない書き方があればご教授していただければ幸いです。
DEMOをアップ致しました。
HTML

<!doctype html>
/*～省略～*/
<body id="top">
    <header>
        <nav>
            <ul>
                <li class="current"><a href="#top">1番</a></li>
                <li><a href="/hoge/">2番</a></li>
                <li><a href="#03">3番</a></li>
                <li><a href="#04">4番</a></li>
                <li><a href="#05">5番</a></li>
                <li><a href="#06">6番</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section class="col1">セクション01</section>
            <section class="col2">セクション02</section>
            <section class="col3" id="03">3番</section>
            <section class="col4" id="04">4番</section>
            <section class="col5" id="05">5番</section>
            <section class="col1">セクション</section>
            <section class="col2">セクション</section>
            <section class="col3">セクション</section>
            <section class="col4" id="06">6番</section>
            <section class="col5">セクション</section>
        </article>
    </main>
<script
  src="https://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script> 
<script src="/js/main.js"></script> 
</body>
</html>

$(function(){
    var header = ('header');
    var headerheight = $(header).outerHeight();
    var heightFunc = function () {
        var mainheight = $('main').css('padding-top', headerheight);
    }
    heightFunc();

    $('a[href^="#"]').on('click', function () {
        var Href;
        var position ;
        Href = $(this).attr("href");
        position = $(Href).offset().top;
        $('body,html').animate({
            scrollTop: position - headerheight
        }, 800, 'swing');
        return false;
    });

    var currentFunc = function () {
        var sectionTop = new Array;
        var nowScroll;
        $('section').each(function (i) {
            sectionTop[i] = $(this).offset().top;
            sectionTop[i] = sectionTop[i] - headerheight;
        });
        $(window).scroll(function () {
            nowScroll = $(window).scrollTop();
            if (sectionTop[0] <= nowScroll && sectionTop[1] > nowScroll) {
                $('header nav ul li').eq(0).addClass('current');
            } else {
                $('header nav ul li').eq(0).removeClass('current');
            }
            if (sectionTop[2] <= nowScroll && sectionTop[3] > nowScroll) {
                $('header nav ul li').eq(2).addClass('current');
            } else {
                $('header nav ul li').eq(2).removeClass('current');
            }
            if (sectionTop[3] <= nowScroll && sectionTop[4] > nowScroll) {
                $('header nav ul li').eq(3).addClass('current');
            } else {
                $('header nav ul li').eq(3).removeClass('current');
            }
            if (sectionTop[4] <= nowScroll && sectionTop[5] > nowScroll) {
                $('header nav ul li').eq(4).addClass('current');
            } else {
                $('header nav ul li').eq(4).removeClass('current');
            }
            if (sectionTop[8] <= nowScroll && sectionTop[9] > nowScroll) {
                $('header nav ul li').eq(5).addClass('current');
            } else {
                $('header nav ul li').eq(5).removeClass('current');
            }
        });
    }
    currentFunc();
});

karamarimo

2017/12/12 15:28

二番のヘッダーの href が /hoge/ なのは理由があるのでしょうか。

masaya_ohashi

2017/12/13 00:33

セクション2という範囲が3番扱いになっているのは仕様ですか？

masaya_ohashi

2017/12/13 00:34

あと、idが割り当てられていないセクションのときはどのヘッダもcurrentにならない仕様で正しいですか？

SaekoIwaki

2017/12/13 14:09

karamarimo様　ご連絡が遅れてすいません。2番目のヘッダーに/hoge/がある理由は、ナビゲーションに外部リンクやページ遷移もある為、カレントは付けない、という意味合いで付けさせていただきました。

SaekoIwaki

2017/12/13 14:13 編集

masaya_ohashi様　ご連絡が遅れてすいません。　セクション2の範囲は3番扱いでは無いと思いますが。。。ナビゲーションの3番を押下するとちゃんと三つ目のsectionに移動すると思います。また、「idが割り当てられていないセクションのときはどのヘッダもcurrentにならない仕様」についてですが、おっしゃる通りの認識で問題ないです。ちょっと変な仕様ではありますが。。。

karamarimo

2017/12/13 15:44

masaya_ohashiさんがおっしゃったのは、"sectionTop[1] <= nowScroll && sectionTop[3] > nowScroll"の部分だと思います。これだとセクション02と3にいるときに3番目のヘッダーがハイライトされますよね。

SaekoIwaki

2017/12/13 16:01

karamarimo様　おっしゃる通り確認しましたら確かにハイライトされていましたね。。。ですのでそこの部分はただのミスです。失礼しました。

行動規範の内容に同意します

回答4件

ベストアンサー

以下のような内容ではどうでしょうか？

html
1<!doctype html>
2<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
3<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
4<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
5<!--[if gt IE 8]><!-->
6<html class="">
7<!--<![endif]-->
8<head>
9<meta charset="utf-8">
10<meta name="viewport" content="width=device-width, initial-scale=1">
11<title>Untitled Document</title>
12<link href="/css/style.css" rel="stylesheet" type="text/css">
13</head>
14<!-- bodyのidを移動 -->
15<body>
16    <header>
17        <nav>
18            <ul>
19                <li class="current"><a href="#top">1番</a></li>
20                <li><a href="/hoge/">2番</a></li>
21                <li><a href="#03">3番</a></li>
22                <li><a href="#04">4番</a></li>
23                <li><a href="#05">5番</a></li>
24                <li><a href="#06">6番</a></li>
25            </ul>
26        </nav>
27    </header>
28    <main>
29        <article>
30            <!-- bodyのidはこちらに移動 -->
31            <section class="col1" id="top">セクション01</section>
32            <section class="col2">セクション02</section>
33            <section class="col3" id="03">3番</section>
34            <section class="col4" id="04">4番</section>
35            <section class="col5" id="05">5番</section>
36            <section class="col1">セクション</section>
37            <section class="col2">セクション</section>
38            <section class="col3">セクション</section>
39            <section class="col4" id="06">6番</section>
40            <section class="col5">セクション</section>
41        </article>
42    </main>
43<script
44  src="https://code.jquery.com/jquery-1.12.4.js"
45  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
46  crossorigin="anonymous"></script>
47<script src="/js/main.js"></script>
48</body>
49</html>

javascript
1$(function() {
2  var header = ('header');
3  var headerheight = $(header).outerHeight();
4  var heightFunc = function() {
5    var mainheight = $('main').css('padding-top', headerheight);
6  }
7  heightFunc();
8
9  $('a[href^="#"]').on('click', function() {
10    var Href;
11    var idxTargetposition;
12    Href = $(this).attr("href");
13    var position = $(Href).offset().top;
14    $('body,html').animate({
15      scrollTop: position - headerheight
16    }, 800, 'swing');
17    return false;
18  });
19
20  // ここから下が変更箇所
21  var $nav = $('nav');
22
23  // has関数の参考
24  // http://taneppa.net/jq_filter/
25  // a[href^="#"]の参考
26  // http://weboook.blog22.fc2.com/blog-entry-268.html#b2
27  var $lists = $nav.find('li').has('a[href^="#"]');
28
29  var update = function() {
30    var currentTop = $(window).scrollTop() + headerheight;
31    $lists.removeClass('current');
32
33    $lists.each(function() {
34      var $list = $(this);
35      var $anchor = $list.find('a');
36      var href = $anchor.attr('href');
37      var $section = $(href);
38
39      if ($section.length > 0) {
40        var sectionTop = $section.offset().top;
41        var sectionBottom = sectionTop + $section.outerHeight();
42
43        if (currentTop >= sectionTop && currentTop < sectionBottom) {
44          $list.addClass('current');
45        }
46      }
47
48    });
49  };
50
51  $(window).on('scroll resize', function() {
52    update();
53  });
54  update();
55});

注意点として、JSをシンプルに記述するために#topをbodyではなく最初のsectionに移動しています。

というのも、他はsectionにidを付けているのに#topだけbodyに付けてしまうと例外的な処理をJSでする必要があるためです。

動作的には同じ動作をするようになっていますが、どうしてもbodyに#topを付ける必要がある場合はJSにif文等で例外的な処理が必要になります。

投稿2017/12/14 14:38

編集2017/12/14 14:49

sdmilieu

総合スコア73

退会済みユーザー

2017/12/14 14:54

style.cssの内容が提示されていると、回答者は検証しやすいでしょう。

sdmilieu

2017/12/14 15:01

style.cssに関しては質問者の方が提示されたデモから変更していないため省略しました。

退会済みユーザー

2017/12/14 15:07

すみません、勘違いしてました。アイコンがデフォルトだったので、質問者ご本人だと思い込んでました。

sdmilieu

2017/12/14 15:10

いえいえ、構わないですよ。確かに紛らわしいですしね

SaekoIwaki

2017/12/15 14:19

sdmilieu様ご回答ありがとうございました。こちらも後出しで申し訳ないですが(後出しと言うより単純に作りをシンプルにし過ぎたためすっかり大事なことを忘れていました)、ナビゲーションメニューの2番めに相当するのがセクション02に相当するところであり、スクロールした時にカレントが付く様な仕様です。イメージ的には、ナビゲーション2番がnews一覧ページに遷移し、トップページにnewsが数件表示されているデザインのようなイメージです。大変失礼しました。しかし、提示して頂いたコードの応用で条件分岐させれば出来る様な気がしてきました。プログラムの書き方も自分のと違うため勉強になりました。頂いたコードで試行錯誤してみみます。ありがとうございました!

行動規範の内容に同意します

こんな感じに仕上げてみました！
良かったらどうぞ～

HTML
1
2<!doctype html>
3<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
4<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
5<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
6<!--[if gt IE 8]><!-->
7<html class="">
8<!--<![endif]-->
9<head>
10<meta charset="utf-8">
11<meta name="viewport" content="width=device-width, initial-scale=1">
12<title>Untitled Document</title>
13<link href="css/style.css" rel="stylesheet" type="text/css">
14</head>
15<body id="top">
16    <header>
17        <nav>
18            <ul>
19                <li class="current"><a href="#col01">1番</a></li>
20                <li><a href="#col02">2番</a></li>
21                <li><a href="#col03">3番</a></li>
22                <li><a href="#col04">4番</a></li>
23                <li><a href="#col05">5番</a></li>
24                <li><a href="#col06">6番</a></li>
25            </ul>
26        </nav>
27    </header>
28    <main>
29        <article>
30            <section class="col1" id="col01">セクション01</section>
31            <section class="col2" id="col02">セクション02</section>
32            <section class="col3" id="col03">3番</section>
33            <section class="col4" id="col04">4番</section>
34            <section class="col5" id="col05">5番</section>
35           
36            <section class="col4" id="col06">6番</section>
37            
38        </article>
39    </main>
40<script
41  src="https://code.jquery.com/jquery-1.12.4.js"
42  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
43  crossorigin="anonymous"></script> 
44<script src="/js/main.js"></script> 
45</body>
46</html>
47

js
1
2$(function(){
3
4    var header = $('header');
5    var headerheight = header.outerHeight();
6    var heightFunc = function () {
7        $('main').css('padding-top', headerheight);
8    }
9
10    var currentFunc = function () {
11        var sectionTop = new Array;
12        var nowScroll;
13        $('section').each(function (i) {
14            sectionTop[i] = $(this).offset().top;
15            sectionTop[i] = sectionTop[i] - headerheight;
16        });
17        $(window).scroll(function () {
18            var list = $('header nav ul li');
19            var classCurrent = 'current';
20            var sectionTopLen = sectionTop.length-1;            
21            nowScroll = $(window).scrollTop();
22
23            for(var ii = 0; ii <= sectionTopLen ; ii++){
24
25                if(ii === sectionTopLen){
26                    if (sectionTop[ii] <= nowScroll) {
27                        list.eq(ii).addClass(classCurrent);
28                    }else{
29                        list.eq(ii).removeClass(classCurrent);
30                    }
31                }else{
32                    if(sectionTop[ii] <= nowScroll && sectionTop[ii+1] > nowScroll) {
33                        list.eq(ii).addClass(classCurrent);
34                    }else{
35                        list.eq(ii).removeClass(classCurrent);
36                    }
37                }
38            }
39
40        });
41    }
42
43    $('a[href^="#"]').on('click', function () {
44        var Href;
45        var position ;
46        Href = $(this).attr("href");
47        position = $(Href).offset().top;
48        $('body,html').animate({
49            scrollTop: position - headerheight
50        }, 800, 'swing');
51        return false;
52    });
53    heightFunc();
54    currentFunc();
55    
56});
57

投稿2017/12/13 08:11

編集2017/12/14 03:41

Yousuck

総合スコア349

SaekoIwaki

2017/12/13 14:17

Yousuck様ご回答ありがとうございます!! 試しに動かしてみて順にソースコードを理解してみますので、しばしお待ち下さい。ありがとうございました。

SaekoIwaki

2017/12/14 13:39

Yousuck様ご連絡が遅れてすいません。実際に提示して頂いたコードで試しましたが、各セクションを通過すると順番ずつにナビゲーションにカレントがつくみたいです。。。普通のナビゲーション(liの個数)とセクション(セクションの個数)が連動している感じになっていますね。。。6個目のセクションを過ぎたらカレントがつかなくなってしまうのでこの動きではちょっと違いますね。

SaekoIwaki

2017/12/14 13:39

行動規範の内容に同意します

サンプルコード
https://jsfiddle.net/bdbLgabb/1/

とくに行数としては短くはなってないのですが、
ユーティリティ関数とセクションの位置情報を保持するクラスを追加しました。
管理するセクションを集め、スクロールイベント時に、
現在のスクロール座標が含まれているセクションを探し、
見つけたら該当するナビゲーションにクラスを付与するという流れになります。
どうでしょうか・・・

javascript
1$(function(){
2	const headerheight = $( 'header' ).outerHeight();
3	$( 'main' ).css( 'padding-top', headerheight );
4
5	$( 'a[href^="#"]' ).on( 'click', function (){
6		const Href = $( this ).attr( "href" );
7		const position = $( Href ).offset().top;
8		$( 'body,html' ).animate( {
9			scrollTop: position - headerheight
10		}, 800, 'swing' );
11		return false;
12	} );
13
14	// 主にここから↓↓↓↓を変更しました
15	/** 範囲処理 */
16	function range(a, b){
17		return {
18			/**
19			 * 指定範囲内に含まれているかチェック
20			 * @param {number} val
21			 */
22			include: function(val){
23				return a <= val && b > val;
24			}
25		}
26	}
27
28	class SectionItem {
29		/**
30		 * sectionキーとtopとbottom座標を保持
31		 * @param {string} key 
32		 * @param {number} top 
33		 * @param {number} bottom 
34		 */
35		constructor(key, top, bottom) {
36			this.key = key;
37			this.top = top;
38			this.bottom = bottom;
39		}
40	}
41
42	(function (){
43		/**
44		 * 管理対象のセクションを収集
45		 * @type {SectionItem[]}
46		 */
47		const items = $('section').map(function (i, elem){
48			const $elem = $(elem);
49			const id = $elem.attr('id');
50			const top = $elem.offset().top;
51			const bottom = top + $elem.height();
52			//idがあるものだけ管理
53			if( id ) return new SectionItem( id, top, bottom );
54		}).toArray();
55
56		const $navli = $('header nav ul li');
57		const $win = $(window);
58
59		/** スクロール時に処理する関数 (可能ならlodashを使って間引いたり) */
60		const scrollProcess = function (){
61			const y = $win.scrollTop() + headerheight;
62			//いったん全部削除
63			$navli.removeClass('current');
64			//該当座標範囲内のセクションアイテムを探す
65			const item = items.find( p => range( p.top, p.bottom ).include(y) );
66			//あればcurrentクラスを付与
67			if( item ) $(`a[href="#${item.key}"]`, $navli).parent().addClass('current');
68		};
69
70		$win.scroll(scrollProcess);
71
72		//初回のみ手動実行
73		scrollProcess();
74	})();
75});

htmlは<section class="col1" id="top">セクション01</section>だけ追加しました。
sectionのidを元にナビゲーションのcurrent操作をしているので、
本格的に利用する場合はもう一手間かけ、
管理用のプロパティを付与するなり、仕様変更を推奨します。

追記～仕様変更例～
仕様変更その１：bodyのid=topを削除
仕様変更その２：他と同じようにナビ側を<li><a href="#01">1番</a></li>として、セクションも
<section class="col1" id="01">セクション01</section>とする

html
1/*～省略～*/
2<body id="top">
3    <header>
4        <nav>
5            <ul>
6                <li><a href="#top">1番</a></li>
7                <li><a href="/hoge/">2番</a></li>
8                <li><a href="#03">3番</a></li>
9                <li><a href="#04">4番</a></li>
10                <li><a href="#05">5番</a></li>
11                <li><a href="#06">6番</a></li>
12            </ul>
13        </nav>
14    </header>
15    <main>
16        <article>
17            <section class="col1" id="top">セクション01</section>
18            <section class="col2">セクション02</section>
19            <section class="col3" id="03">3番</section>
20            <section class="col4" id="04">4番</section>
21            <section class="col5" id="05">5番</section>
22            <section class="col1">セクション</section>
23            <section class="col2">セクション</section>
24            <section class="col3">セクション</section>
25            <section class="col4" id="06">6番</section>
26            <section class="col5">セクション</section>
27        </article>
28    </main>
29<script
30  src="https://code.jquery.com/jquery-1.12.4.js"
31  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
32  crossorigin="anonymous"></script> 
33<script src="/js/main.js"></script> 
34</body>
35</html>
36

投稿2017/12/15 08:29

編集2017/12/15 08:54

so87

総合スコア764

SaekoIwaki

2017/12/15 14:27

so87様ご回答ありがとうございました。サンプルコードまで用意していただきありがとうございます。ちょっと直ぐに理解が出来ないので順を追って上からご返事させていただきます。しばしお待ち下さい。

SaekoIwaki

2017/12/15 15:04

コードをローカル環境で試した所、うまく動作しました。ありがとうございます。ただ、自分にとっていきなり難しいソースに感じてしまって理解するのに時間が掛かりそうです。。。大変勉強になりました。お手数をお掛けして失礼しました。

行動規範の内容に同意します

結局やりたいことを最大限に汲み取った結果、以下のようになりました。

id は数字で始まる命名はできません。
http://www.tagindex.com/html_tag/attribute/id.html

sectionにつけていた連番のクラス名は削除しました。
たいていの場合、メンテナンス性を損ねるため。

php
1<!doctype html>
2<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
3<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
4<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
5<!--[if gt IE 8]><!-->
6<html class="">
7	<!--<![endif]-->
8	<head>
9		<meta charset="utf-8">
10		<meta name="viewport" content="width=device-width, initial-scale=1">
11		<title>Untitled Document</title>
12		<style type="text/css">
13			.current a {
14				color:red;
15			}
16			section {
17				height: 300px;
18			}
19		</style>
20	</head>
21	<body>
22		<header>
23			<nav>
24				<ul class="navigation">
25					<li class="current"><a href="#top">1番</a></li>
26					<li><a href="/hoge/">2番</a></li>
27					<li><a href="#sec03">3番</a></li>
28					<li><a href="#sec04">4番</a></li>
29					<li><a href="#sec05">5番</a></li>
30					<li><a href="#sec06">6番</a></li>
31				</ul>
32			</nav>
33		</header>
34		<main>
35			<article>
36				<!-- bodyのidはこちらに移動 -->
37				<section id="top">セクション01</section>
38				<section>セクション02</section>
39				<section id="sec03">3番</section>
40				<section id="sec04">4番</section>
41				<section id="sec05">5番</section>
42				<section>セクション</section>
43				<section>セクション</section>
44				<section>セクション</section>
45				<section id="sec06">6番</section>
46				<section>セクション</section>
47			</article>
48		</main>
49		<script
50		src="//code.jquery.com/jquery-1.12.4.js"></script>
51		<script>
52			$(function () {
53				$('.navigation a[href^="#"]').on('click', function () {
54					// 一旦currentを全部消す
55					var lists = $(this).parents('ul').children('li');
56					lists.removeClass('current');
57
58					// クリックしたa要素の親liにcurrentをつける
59					var li = $(this).parent('li');
60					li.addClass('current');
61
62					// スムーズスクロール
63					var href_val = $(this).attr('href');
64					var t = $(href_val).offset().top;
65					$('html,body').animate({
66						scrollTop: t
67					}, 800, 'swing');
68					return false;
69				});
70			});
71		</script>
72	</body>
73</html>

要件が足りなかったようなので修正

html
1<!doctype html>
2<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
3<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
4<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
5<!--[if gt IE 8]><!-->
6<html class="">
7	<!--<![endif]-->
8	<head>
9		<meta charset="utf-8">
10		<meta name="viewport" content="width=device-width, initial-scale=1">
11		<title>Untitled Document</title>
12		<style type="text/css">
13			.current a {
14				color:red;
15			}
16			section {
17				height: 300px;
18			}
19		</style>
20	</head>
21	<body>
22		<header>
23			<nav>
24				<ul class="navigation">
25					<li class="current"><a href="#top">1番</a></li>
26					<li><a href="/hoge/">2番</a></li>
27					<li><a href="#sec03">3番</a></li>
28					<li><a href="#sec04">4番</a></li>
29					<li><a href="#sec05">5番</a></li>
30					<li><a href="#sec06">6番</a></li>
31				</ul>
32			</nav>
33		</header>
34		<main>
35			<article>
36				<!-- bodyのidはこちらに移動 -->
37				<section class="col1" id="top">セクション01</section>
38				<section class="col2">セクション02</section>
39				<section class="col3" id="sec03">3番</section>
40				<section class="col4" id="sec04">4番</section>
41				<section class="col5" id="sec05">5番</section>
42				<section class="col1">セクション</section>
43				<section class="col2">セクション</section>
44				<section class="col3">セクション</section>
45				<section class="col4" id="sec06">6番</section>
46				<section class="col5">セクション</section>
47			</article>
48		</main>
49		<script
50		src="//code.jquery.com/jquery-1.12.4.js"></script>
51		<script>
52			$(function () {
53
54				function removeListClass() {
55					$('.navigation li.current').removeClass('current');
56				}
57
58				$('.navigation a[href^="#"]').on('click', function () {
59					// 一旦currentを全部消す
60					removeListClass();
61
62					// クリックしたa要素の親liにcurrentをつける
63					var li = $(this).parent('li');
64					li.addClass('current');
65
66					// スムーズスクロール
67					var href_val = $(this).attr('href');
68					var t = $(href_val).offset().top;
69					$('html,body').animate({
70						scrollTop: t
71					}, 800, 'swing');
72					return false;
73				});
74
75				function getElementByWindowTop(scrollTop) {
76					var anchors = $('.navigation a[href^="#"]');
77					var data = {};
78					anchors.each(function (i) {
79						var id = $(this).attr('href');
80						var t = $(id).offset().top;
81						data[id] = t;
82					});
83
84					var exitLoop = false;
85					$.each(data, function (id) {
86						if (exitLoop) {
87							return;
88						}
89						if (data[id] >= scrollTop) {
90//							console.log(id);
91							removeListClass();
92							$('.navigation li:has(a[href="' + id + '"])').addClass('current');
93							exitLoop = true;
94						}
95					});
96				}
97
98				// 変数宣言
99				var timerId;
100
101				// スクロール停止イベントのバインド
102				$(window).bind("scrollFinish", function (event, scrollTop) {
103					// メニュー移動処理呼び出し（後に掲載するサンプルを参照して下さい）
104					getElementByWindowTop(scrollTop);
105				});
106
107				// スクロールイベントのバインド
108				$(window).bind("scroll", function () {
109					var scrollTop = $(document).scrollTop();
110					if (timerId) {
111						clearTimeout(timerId);
112					}
113					// 1秒間スクロールしない場合はscrollFinishイベントを呼び出し
114					timerId = setTimeout(function () {
115						timerId = null;
116						$(window).trigger("scrollFinish", [scrollTop]);
117					}, 100);
118				});
119
120				$(window).unload(function () {
121					$(window).unbind("scroll scrollFinish");
122				});
123			});
124		</script>
125	</body>
126</html>

投稿2017/12/14 15:35

編集2017/12/15 14:31

退会済みユーザー

総合スコア0

SaekoIwaki

2017/12/15 14:05

Kosuke_Shibuya様ご回答ありがとうございました。後出しで大変申し訳無いのですが、ナビゲーションを押下した場合にカレントをつける方法ではなく、どちらかと言うと、スクロールした場合にカレントをつける方法を希望していました。大変失礼しました。ですが、IDに数字で始まる命名はしていけないことを指摘していただきありがとうございました。プログラムを教えていただき、ありがとうございました。

退会済みユーザー

2017/12/15 14:13

> スクロールした場合にカレントをつける方法追記したコードがそのようになっています。どちらかというと、両方やる必要があるかと思いますが。

SaekoIwaki

2017/12/15 14:22

Kosuke_Shibuya様ご回答ありがとうございます。頂いたコードでやってみたのですが、うまく動作しなかったのですが、私がうまくできなかったのか、もう一度見直してみます。しばしお待ち下さい。

退会済みユーザー

2017/12/15 14:27

どうでしょう？検証が足りなかったでしょうかね？

SaekoIwaki

2017/12/15 14:39

Kosuke_Shibuya様やはりうまく動作しませんね。。。スクロールの.offset().topがずれているのか、早い段階でカレントが移動してしまいます。ヘッダーの高さ分よりもずれているので少し検証が必要かもです。。。もしかしたら私の書き方が間違っているかも？？ ↓頂いたサンプルコード↓ https://codepen.io/sekis/pen/WdQNYG

退会済みユーザー

2017/12/15 14:43

CodePenでは htmからではなく、 body から書けと警告が出ていますね。

SaekoIwaki

2017/12/15 14:47

Kosuke_Shibuya様確かに警告がでてました。修正致しました。ローカル環境でも試したのですが、やはりずれてしまいますね。。。

退会済みユーザー

2017/12/15 14:53 編集

ずれているということですね。そこは調整必要ですね。ガチガチのチェックしているわけじゃないので、そこは調整してください。一応メンテナンス性考えて書いたつもりなので、HTMLが変わってもjsはいじらなくても良くなるはずです。

SaekoIwaki

2017/12/15 15:01

Kosuke_Shibuya様ご回答ありがとうございます。頂いたコードでも試してやってみます。メンテナンス性のことも考慮していただきありがとうございました。もう一度上から見直して頂いたコードを参考に綺麗に書いてみます。お手数をお掛けして、失礼しました。ありがとうございました。