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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3866閲覧

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

hayakawatakuma

総合スコア21

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2018/11/26 09:32

編集2018/11/26 11:15

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

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

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

HTML

1 <div id="header"> 2 <div class="inner"> 3 <ul id="gnav"> 4 <li><a href="#contents01" class="current">コンテンツA</a></li> 5 <li><a href="#contents02">コンテンツB</a></li> 6 <li><a href="#contents03">コンテンツC</a></li> 7 <li><a href="#contents04">コンテンツD</a></li> 8 </ul> 9 </div> 10 </div> 11 <div id="contents"> 12 <div class="inner"> 13 <div id="contents01"> 14 <h2>コンテンツA</h2> 15 コンテンツAの領域 16 </div> 17 <div id="contents02"> 18 <h2>コンテンツB</h2> 19 コンテンツBの領域 20 </div> 21 <div id="contents03"> 22 <h2>コンテンツC</h2> 23 コンテンツCの領域 24 </div> 25 <div id="contents04"> 26 <h2>コンテンツD</h2> 27 コンテンツDの領域 28 </div> 29 </div> 30 </div>

css

1@charset "utf-8"; 2* { 3 margin: 0; 4 padding: 0; 5} 6li{ 7 list-style-type: none; 8} 9#page { 10 position: relative; 11 width: 100%; 12} 13.inner { 14 width: 960px; 15 overflow: hidden; 16 margin: 0 auto; 17} 18#header { 19 position: fixed; 20 top: 0; 21 left: 0; 22 z-index: 200; 23 width: 100%; 24 padding: 20px 0; 25 text-align: center; 26 background: #dddddd; 27} 28#header #gnav { 29 float: right; 30} 31#header #gnav li { 32 float: left; 33 padding-left: 20px; 34} 35#header #gnav li a { 36 color: #666666; 37 text-decoration: none; 38} 39#header #gnav li a.current { 40 color: #000000; 41 text-decoration: underline; 42} 43#contents { 44 position: relative; 45 z-index: 100; 46 width: 100%; 47 background: #bbbbbb; 48} 49#contents .inner div { 50 height: 1000px;<!--高さがsection毎に異なる場合にカレントが中途半端な位置で表示される--> 51 padding-top: 70px; 52} 53#contents .inner div:nth-child(even) { 54 background: #777777; 55} 56#contents .inner div:nth-child(odd) { 57 background: #999999; 58}

js

1$(function() { 2 // ナビゲーションのリンクを指定 3 var navLink = $('#header #gnav li a'); 4 5 // 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく 6 var contentsArr = new Array(); 7 for (var i = 0; i < navLink.length; i++) { 8 // コンテンツのIDを取得 9 var targetContents = navLink.eq(i).attr('href'); 10 // ページ内リンクでないナビゲーションが含まれている場合は除外する 11 if(targetContents.charAt(0) == '#') { 12 // ページ上部からコンテンツの開始位置までの距離を取得 13 var targetContentsTop = $(targetContents).offset().top; 14 // ページ上部からコンテンツの終了位置までの距離を取得 15 var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1; 16 // 配列に格納 17 contentsArr[i] = [targetContentsTop, targetContentsBottom] 18 } 19 }; 20 21 // 現在地をチェックする 22 function currentCheck() { 23 // 現在のスクロール位置を取得 24 var windowScrolltop = $(window).scrollTop(); 25 for (var i = 0; i < contentsArr.length; i++) { 26 // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる 27 if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) { 28 // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける 29 navLink.removeClass('current'); 30 navLink.eq(i).addClass('current'); 31 i == contentsArr.length; 32 } 33 }; 34 } 35 36 // ページ読み込み時とスクロール時に、現在地をチェックする 37 $(window).on('load scroll', function() { 38 currentCheck(); 39 }); 40 41 // ナビゲーションをクリックした時のスムーズスクロール 42 navLink.click(function() { 43 $('html,body').animate({ 44 scrollTop: $($(this).attr('href')).offset().top 45 }, 300); 46 return false; 47 }) 48});

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

投稿2018/11/28 01:34

hayakawatakuma

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2018/11/26 09:50

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hayakawatakuma

2018/11/26 10:21

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

2018/11/26 10:24

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

2018/11/26 11:16

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

2018/11/27 09:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問