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

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

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

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

Q&A

解決済

1回答

3667閲覧

スクロール位置でナビゲーションに変化をつけたい

shomo

総合スコア8

jQuery

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

0グッド

0クリップ

投稿2018/08/27 08:44

スクロールに合わせてコンテンツの位置を取得し、ナビゲーションの色を薄くして、かつアンダーラインを入れたいと思っています。
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html
こちらのサイトを参考にして作成していますが、全く反応もなく、検証ツールでは$(targetContents).offset().top;に取得できないとエラー文が出ています。
どのようにすれば、うまくいくのでしょうか。

js

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

HTML

1<ul id="gnav" class="navigation-list"> 2 <li class="list-item"><a href="#top" class="underline side">Home</a></li> 3 <li class="list-item"><a href="#about" class="underline side">About</a></li> 4 <li class="list-item"><a href="#case-studies" class="underline side">Case studies</a></li> 5... 6

css

1#gnav a { 2 text-decoration: none; 3 color: #000000; 4 transition: border-color 0.3s, color 0.3s; 5} 6 7#gnav a .current { 8 color: #1d3d36; 9 opacity: 0.6; 10}

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

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

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

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

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

guest

回答1

0

ベストアンサー

このコードでいくなら、まず#gnavのaにidを振らないと駄目ですよ。

HTML

1<ul id="gnav" class="navigation-list"> 2 <li class="list-item"><a id="top" href="#top" class="underline side">Home</a></li> 3 <li class="list-item"><a id="about" href="#about" class="underline side">About</a></li> 4 <li class="list-item"><a id="case-studies" href="#case-studies" class="underline side">Case studies</a></li> 5... 6

で、scriptは
var targetContentsTop = $(targetContents).offset().top;
の書き方を修正。

JavaScript

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

あと、CSS

CSS

1#gnav a { 2 text-decoration: none; 3 color: #000000; 4 transition: color 0.3s; 5 border-bottom:1px solid transparent; 6} 7 8#gnav a.current { 9 color: #1d3d36; 10 opacity: 0.6; 11 border-bottom-color: #1d3d36; 12}

以上です。

投稿2018/08/28 07:05

編集2018/08/28 07:19
Yousuck

総合スコア349

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

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

shomo

2018/08/28 16:51

回答いただきありがとうございます。 上記記述に全て変更したのですが、変化ありませんでした。 絶対上のコードでやらなくては!など考えていなく、他のコードでのやり方でもいいので 何か対策をご教示いただけると助かります。 どうぞよろしくお願いいたします。
Yousuck

2018/08/29 01:19

ごめんなさい。 コピペしてできませんでしたでは、お話にならないです。 エラーが出ているのであればその旨追記をしてくださいな。 一応、こちらでは上記のコードで再現できております。
shomo

2018/08/30 09:53

回答ありがとうございます。 こちらからの返信が大変遅くなり申し訳ございません。 お話にならない←大変失礼いたしました。 もう一度やってみたところ、スクロールしてナビが変化したのですが、変化させたいナビゲーションでないナビゲーションが変化します。 すみません、これはもう一度自分で解読しなくてはと思っている中、まだ手がつけられていなく、ご連絡が遅くなりました。
Yousuck

2018/08/31 01:31

返信が遅くなっても全然かまいませんよ。 で、変化はするが期待した動作ではなかったとのことですが(←こちらの想定通りです。あとはご自身で調整するものだと思っておりました。) ご質問内容にも、また、ご提示のソースで推測してもshomoさんがどうしたいのかは分からないです。 参考サイトはHTMLのソースにコンテンツをしっかりと記載されておりますが、ご提示のHTMLにはナビゲーションしか記載されておりません。(しかも、途中で略されてるよー) なので、しっかりとご自身の環境(そのままでなくて良いので、この場合再現できる内容)をご提示くださいな。
shomo

2018/09/09 23:32

また、遅くなり申し訳ございません。 質問の仕方が間違っていること、大変失礼いたしました。 あとはご自身で調整するものだと思っておりました。 ←すみません、まだ勉強始めでわかっていないまま質問投稿していました。 言い訳ばかりの返信になり、自分の勉強不足の状態での質問投稿に情けないばかりです。 改めてYousuckさんに質問できるように今一度自分で考え直します!!!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問