質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

シングルページでスクロールした際にナビゲーションに現在地を表示する

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 2,101

hayakawatakuma

score 20

表題の件、同じ質問が別にあり重複して申し訳ございませんが、
うまく実装できず、教えていただけますでしょうか。

下記のjsを現在実装しているのですが、
各section毎に高さが違う場合、ナビゲーションのカレントが中途半端な位置で
切り替わってしまいます。

こちらのソースを拝見すると各sectionにかっちり高さが指定されている上で
成立しているかと思うのですが。。。
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html

    <div id="header">
        <div class="inner">
            <ul id="gnav">
                <li><a href="#contents01" class="current">コンテンツ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>
    <div id="contents">
        <div class="inner">
            <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>
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
li{
    list-style-type: none;
}
#page {
    position: relative;
    width: 100%;
}
.inner {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
}
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background: #dddddd;
}
#header #gnav {
    float: right;
}
#header #gnav li {
    float: left;
    padding-left: 20px;
}
#header #gnav li a {
    color: #666666;
    text-decoration: none;
}
#header #gnav li a.current {
    color: #000000;
    text-decoration: underline;
}
#contents {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #bbbbbb;
}
#contents .inner div {
    height: 1000px;<!--高さがsection毎に異なる場合にカレントが中途半端な位置で表示される-->
    padding-top: 70px;
}
#contents .inner div:nth-child(even) {
    background: #777777;
}
#contents .inner div:nth-child(odd) {
    background: #999999;
}
$(function() {
    // ナビゲーションのリンクを指定
   var navLink = $('#header #gnav 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;
   })
});

各section毎に高さが違う場合でも
カレントが正しい位置で表示されるようにしたいです!
ご教示お願いいたします!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

下記のプラグインを使って解決しました。
http://ryanpark.co.uk/navsync/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

ソースを見る限り#gnavが#headerの要素になっていないのでcssが適用されていないのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/26 19:21

    いえ、こちらはやってみましたが、特に変化はありませんでした。。
    こちらのソースでsection毎のカレント実装まではできています。
    情報量により各sectionの高さが変動した場合にカレントが中途半端な位置で移動します。

    例えば、
    section1の途中で、カレントがナビゲーション2(section2)に移動してしまいます。

    キャンセル

  • 2018/11/26 19:24

    とりあえず、サンプルに#headerと#contentsを記載して最低限動く状態にしないと
    回答がぶれます

    キャンセル

  • 2018/11/26 20:16

    失礼いたしました。
    追加いたしました!

    キャンセル

  • 2018/11/27 18:13

    すみません。。。
    こちらどうでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る