\n \n\n\n\n
\n
\n \n
\n\n
\n

セクション2

\n\n

aaaaaaaaaaaaaa

\n

aaaaaaaaaaaaaa

\n

aaaaaaaaaaaaaa

\n
\n\n
\n

セクション3

\n\n
\n

テキスト

\n

テキスト

\n

テキスト

\n

テキスト

\n

テキスト

\n
\n
\n\n
\n

セクション4

\n
\n

テキストテキストテキストテキストテキストテキストテキ

\n
\n
\n\n
\n

セクション5(アコーディオン)

\n\n \n\n \n \n \n\n \n
\n\n
\n

セクション6

\n

ああああああああああああああああ

\n
\n\n
\n

タイトル7

\n

ああああああああああああああああ

\n
\n\n
\n

タイトル8

\n

ああああああああああああああああ

\n
\n\n
\n

タイトル9

\n

ああああああああああああああああ

\n
\n\n
\n

タイトル10

\n

ああああああああああああああああ

\n
\n\n\n\n```\n\n```CSS\nbody {\n font-size: 16px;\n color: #000000;\n background: #226a42;\n text-align: center;\n margin: 0;\n}\n\nh1,h2, p {\n margin: 0;\n}\n\nul {\n list-style: none;\n}\n\nsection {\n padding: 100px 0;\n}\n\n.contents {\n max-width: 414px;\n margin: auto;\n background: #fff;\n position: relative;\n z-index: 5;\n}\n\n.list {\n margin: 0;\n padding: 0;\n}\n\n.list li {\n width: 300px;\n margin: auto;\n border: 1px solid #226a42;\n margin-bottom: 20px;\n padding: 50px 0;\n}\n\n#jump_02 {\n background: #7fba9a;\n}\n#jump_04 {\n background: #7fba9a;\n}\n#jump_06 {\n background: #7fba9a;\n}\n#jump_08 {\n background: #7fba9a;\n}\n#jump_10 {\n background: #7fba9a;\n}\n\n/*アコーディオン*/\n.more {\n display: block;\n background: #226a42;\n color: #fff;\n width: 275px;\n margin: auto;\n padding: 20px 0;\n position: relative;\n}\n\n.more::after {\n content: \" \";\n position: absolute;\n width: 9px;\n height: 9px;\n border-top: solid 2px #fff;\n border-right: solid 2px #fff;\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n right: 32px;\n top: 24px;\n -webkit-transition: .5s;\n transition: .5s;\n}\n\n.more.on-click::after {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n top: 45%;\n}\n\n.hide {\n display: none;\n}\n\n/*ナビゲーションメニュー*/\n.nav_wrapper {\n height: 100vh;\n right: 0;\n position: fixed;\n top: 0;\n width: 30%;\n z-index: 5;\n}\n\n.header_nav {\n background-color: #fff;\n height: 100%;\n width: 100%;\n z-index: 5;\n}\n\n.nav_inner {\n width: 100%;\n display: block;\n padding-top: 9.03vw;\n}\n\n.menu_list {\n margin-bottom: 30px;\n margin-right: 0;\n padding-left: 100px;\n position: relative;\n}\n\n.menu_list a {\n color: #226a42;\n font-weight: 600;\n}\n\n.menu_list a::before {\n content: \"\";\n width: 25px;\n height: 1px;\n background: #226a42;\n position: absolute;\n left: 50px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n.menu_list a.link_current::before {\n width: 60px;\n left: 15px;\n -webkit-transition: 0.5s;\n transition: 0.5s;\n}\n```\n\n```jQuery\n// アコーディオン\n$(function(){\n $(\".more\").on(\"click\", function() {\n $(this).toggleClass(\"on-click\");\n $(\".hide\").slideToggle(1000);\n });\n});\n\n// スムーススクロール\n$(function(){\n $('.menu a[href^=\"#\"]').click(function() {\n var speed = 1000;\n var href= $(this).attr(\"href\");\n var target = $(href == \"#\" || href == \"\" ? 'html' : href);\n var headerHeight = 0;//固定ヘッダーの高さ\n if ($(target).length) {\n var position = $(target).offset().top-headerHeight;\n }\n $('body,html').animate({scrollTop:position}, speed, 'swing');\n return false;\n });\n});\n\n// ナビゲーションライン\n$(function () {\n var set = 20;// 発火させる位置\n var boxTop = new Array;\n var current = -1;\n //各セクションにpos_nowを付与\n $('.pos_now').each(function (i) {\n boxTop[i] = $(this).offset().top;\n });\n changeBox(0);\n $(window).scroll(function () {\n scrollPosition = $(window).scrollTop();\n for (var i = boxTop.length - 1; i >= 0; i--) {\n if ($(window).scrollTop() > boxTop[i] - set) {\n changeBox(i);\n break;\n }\n };\n });\n function changeBox(secNum) {\n if (secNum != current) {\n current = secNum;\n secNum2 = secNum + 1;\n $('.menu_list a').removeClass('link_current');\n\n if (current == 0) {\n $('#link_01').addClass('link_current');\n } \n else if (current == 1) {\n $('#link_02').addClass('link_current');\n } \n else if (current == 2) {\n $('#link_03').addClass('link_current');\n }\n else if (current == 3) {\n $('#link_04').addClass('link_current');\n }\n else if (current == 4) {\n $('#link_05').addClass('link_current');\n }\n else if (current == 5) {\n $('#link_06').addClass('link_current');\n }\n else if (current == 6) {\n $('#link_07').addClass('link_current');\n }\n else if (current == 7) {\n $('#link_08').addClass('link_current');\n }\n else if (current == 8) {\n $('#link_09').addClass('link_current');\n }\n else if (current == 9) {\n $('#link_10').addClass('link_current');\n }\n }\n };\n});\n```\n試したことは下記になります。\n・アコーディオンの箇所をdisplay: none;ではなく、opacity:0;にて実装する方法で試したが解決しなかった\n\n以上になります。不足している説明等ありましたら、ご指摘いただけますと幸いです。\nご教授何卒よろしくお願いいたしますm(__)m","answerCount":2,"upvoteCount":0,"datePublished":"2022-04-10T09:09:23.026Z","dateModified":"2022-04-10T21:29:07.000Z","acceptedAnswer":{"@type":"Answer","text":"```jQuery\nboxTop[i] = $(this).offset().top;\n```\nここでページにアクセスした際に、各セクションまでの距離を取得しています。\n\nつまり、最初にアクセスした段階でセクション5の要素までの距離、高さはいくつで、その高さ分スクロールしたらセクション6の領域になると決まってしまいます。\n\nしかし、セクション5はアコーディオン展開すると高さが変わってしまいます。\nその為、不具合が起きるわけです。\n\nですので、これを解決するにはアコーディオンを開くボタンをクリックした際に、セクションの高さを再取得し直せば解決すると思います。\n\n### 追記\n\n> いただいたアドバイスを参考に、また高さの取得方法を調べ、「もっと見る」ボタンをクリックした際に、セクションの高さを再取得するよう下記のように書き換えました。しかしうまく動作させることができませんでした。\n> もしよろしければ、高さを再取得する記述方法を教えていただけると嬉しく思います。\n> 知識不足で申し訳ありません。何卒よろしくお願いいたしますm(__)m\n\nもっと良いやり方は全然あると思いますが、いまのコードを活かすなら以下のような形で要望の動きにはなると思います。\n\nfunction changeBox(secNum) {\n︙\n};\nの下に、\n\n```jQuery\n$(\".more\").on(\"click\", function() {\n setTimeout(function(){\n $('.pos_now').each(function (i) {\n boxTop[i] = $(this).offset().top;\n });\n changeBox(4);\n }, 1000);\n});\n```\nを入れる。","dateModified":"2022-04-10T21:03:16.000Z","datePublished":"2022-04-10T09:24:02.918Z","upvoteCount":0,"url":"https://teratail.com/questions/en5psvvv6yscwz#reply-75nr0vjhtszwgt"},"suggestedAnswer":[{"@type":"Answer","text":"      分からない","dateModified":"2022-04-10T12:29:07.325Z","datePublished":"2022-04-10T12:29:07.325Z","upvoteCount":0,"url":"https://teratail.com/questions/en5psvvv6yscwz#reply-sj4djux56416ji","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/jQuery","name":"jQueryに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/en5psvvv6yscwz","name":"ナビゲーション(ページ内リンク)で現在見ている箇所にスタイルをあてたいが不具合が起きる"}}]}}}
質問するログイン新規登録

Q&A

解決済

2回答

1086閲覧

ナビゲーション(ページ内リンク)で現在見ている箇所にスタイルをあてたいが不具合が起きる

kyonu

総合スコア3

jQuery

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

0グッド

0クリップ

投稿2022/04/10 09:09

0

0

ナビゲーション(ページ内リンク)に線をつけていて、現在見ているセクションに到達したら、その線を伸ばすという実装をしたいです。
現在上記の実装はほとんど完了しています。
しかし、セクション5にアコーディオンメニューを実装しており、そのアコーディオンを開いている際に、ナビゲーションの線が次のセクションにいるという認識になるのか、線が伸びてしまいます。こちらの不具合を解消したいです。

コードは下記になります。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>aaa</title> 9 10 <link rel="stylesheet" href="./style.css"> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 12 <script src="./script.js"></script> 13</head> 14 15<body id="jump_01" class="pos_now"> 16 <div class="contents"> 17 <header> 18 <div class="header_inner"> 19 <h1 class="header_logo">タイトル</h1> 20 21 <div class="nav_wrapper"> 22 <div class="header_nav"> 23 <nav class="nav_inner"> 24 <ul class="menu"> 25 <li class="menu_list"><a href="#jump_01" id="link_01">セクション1</a></li> 26 <li class="menu_list"><a href="#jump_02" id="link_02">セクション2</a></li> 27 <li class="menu_list"><a href="#jump_03" id="link_03">セクション3</a></li> 28 <li class="menu_list"><a href="#jump_04" id="link_04">セクション4</a></li> 29 <li class="menu_list"><a href="#jump_05" id="link_05">セクション5(アコーディオン)</a></li> 30 <li class="menu_list"><a href="#jump_06" id="link_06">セクション6</a></li> 31 <li class="menu_list"><a href="#jump_07" id="link_07">セクション7</a></li> 32 <li class="menu_list"><a href="#jump_08" id="link_08">セクション8</a></li> 33 <li class="menu_list"><a href="#jump_09" id="link_09">セクション9</a></li> 34 <li class="menu_list"><a href="#jump_10" id="link_10">セクション10</a></li> 35 </ul> 36 </nav> 37 </div> 38 </div> 39 </div> 40 </header> 41 42 <section class=" pos_now" id="jump_02"> 43 <h2>セクション2</h2> 44 45 <p>aaaaaaaaaaaaaa</p> 46 <p>aaaaaaaaaaaaaa</p> 47 <p>aaaaaaaaaaaaaa</p> 48 </section> 49 50 <section class="pos_now" id="jump_03"> 51 <h2 >セクション3</h2> 52 53 <div> 54 <p>テキスト</p> 55 <p>テキスト</p> 56 <p>テキスト</p> 57 <p>テキスト</p> 58 <p>テキスト</p> 59 </div> 60 </section> 61 62 <section class="pos_now" id="jump_04"> 63 <h2 >セクション4</h2> 64 <div> 65 <p>テキストテキストテキストテキストテキストテキストテキ</p> 66 </div> 67 </section> 68 69 <section class="pos_now" id="jump_05"> 70 <h2 >セクション5(アコーディオン)</h2> 71 72 <ul class="list"> 73 <li> 74 <div>aaa</div> 75 <p>あああああ</p> 76 </li> 77 78 <li> 79 <div>aaa</div> 80 <p>あああああ</p> 81 </li> 82 83 <li> 84 <div>aaa</div> 85 <p>あああああ</p> 86 </li> 87 </ul> 88 89 <!-- 隠れている部分 --> 90 <ul class="list hide"> 91 <li> 92 <div>aaa</div> 93 <p>あああああ</p> 94 </li> 95 96 <li> 97 <div>aaa</div> 98 <p>あああああ</p> 99 </li> 100 101 <li> 102 <div>aaa</div> 103 <p>あああああ</p> 104 </li> 105 106 <li> 107 <div>aaa</div> 108 <p>あああああ</p> 109 </li> 110 111 <li> 112 <div>aaa</div> 113 <p>あああああ</p> 114 </li> 115 116 <li> 117 <div>aaa</div> 118 <p>あああああ</p> 119 </li> 120 121 <li> 122 <div>aaa</div> 123 <p>あああああ</p> 124 </li> 125 </ul> 126 <!-- 隠れている部分 --> 127 128 <button class="more">もっと見る</button> 129 </section> 130 131 <section class="pos_now" id="jump_06"> 132 <h2 >セクション6</h2> 133 <p>ああああああああああああああああ</p> 134 </section> 135 136 <section class="pos_now" id="jump_07"> 137 <h2>タイトル7</h2> 138 <p>ああああああああああああああああ</p> 139 </section> 140 141 <section class="pos_now" id="jump_08"> 142 <h2>タイトル8</h2> 143 <p>ああああああああああああああああ</p> 144 </section> 145 146 <section class="pos_now" id="jump_09"> 147 <h2>タイトル9</h2> 148 <p>ああああああああああああああああ</p> 149 </section> 150 151 <section class="pos_now" id="jump_10"> 152 <h2>タイトル10</h2> 153 <p>ああああああああああああああああ</p> 154 </section> 155</body> 156 157</html>

CSS

1body { 2 font-size: 16px; 3 color: #000000; 4 background: #226a42; 5 text-align: center; 6 margin: 0; 7} 8 9h1,h2, p { 10 margin: 0; 11} 12 13ul { 14 list-style: none; 15} 16 17section { 18 padding: 100px 0; 19} 20 21.contents { 22 max-width: 414px; 23 margin: auto; 24 background: #fff; 25 position: relative; 26 z-index: 5; 27} 28 29.list { 30 margin: 0; 31 padding: 0; 32} 33 34.list li { 35 width: 300px; 36 margin: auto; 37 border: 1px solid #226a42; 38 margin-bottom: 20px; 39 padding: 50px 0; 40} 41 42#jump_02 { 43 background: #7fba9a; 44} 45#jump_04 { 46 background: #7fba9a; 47} 48#jump_06 { 49 background: #7fba9a; 50} 51#jump_08 { 52 background: #7fba9a; 53} 54#jump_10 { 55 background: #7fba9a; 56} 57 58/*アコーディオン*/ 59.more { 60 display: block; 61 background: #226a42; 62 color: #fff; 63 width: 275px; 64 margin: auto; 65 padding: 20px 0; 66 position: relative; 67} 68 69.more::after { 70 content: " "; 71 position: absolute; 72 width: 9px; 73 height: 9px; 74 border-top: solid 2px #fff; 75 border-right: solid 2px #fff; 76 -webkit-transform: rotate(135deg); 77 transform: rotate(135deg); 78 right: 32px; 79 top: 24px; 80 -webkit-transition: .5s; 81 transition: .5s; 82} 83 84.more.on-click::after { 85 -webkit-transform: rotate(-45deg); 86 transform: rotate(-45deg); 87 top: 45%; 88} 89 90.hide { 91 display: none; 92} 93 94/*ナビゲーションメニュー*/ 95.nav_wrapper { 96 height: 100vh; 97 right: 0; 98 position: fixed; 99 top: 0; 100 width: 30%; 101 z-index: 5; 102} 103 104.header_nav { 105 background-color: #fff; 106 height: 100%; 107 width: 100%; 108 z-index: 5; 109} 110 111.nav_inner { 112 width: 100%; 113 display: block; 114 padding-top: 9.03vw; 115} 116 117.menu_list { 118 margin-bottom: 30px; 119 margin-right: 0; 120 padding-left: 100px; 121 position: relative; 122} 123 124.menu_list a { 125 color: #226a42; 126 font-weight: 600; 127} 128 129.menu_list a::before { 130 content: ""; 131 width: 25px; 132 height: 1px; 133 background: #226a42; 134 position: absolute; 135 left: 50px; 136 top: 50%; 137 -webkit-transform: translateY(-50%); 138 transform: translateY(-50%); 139} 140 141.menu_list a.link_current::before { 142 width: 60px; 143 left: 15px; 144 -webkit-transition: 0.5s; 145 transition: 0.5s; 146}

jQuery

1// アコーディオン 2$(function(){ 3 $(".more").on("click", function() { 4 $(this).toggleClass("on-click"); 5 $(".hide").slideToggle(1000); 6 }); 7}); 8 9// スムーススクロール 10$(function(){ 11 $('.menu a[href^="#"]').click(function() { 12 var speed = 1000; 13 var href= $(this).attr("href"); 14 var target = $(href == "#" || href == "" ? 'html' : href); 15 var headerHeight = 0;//固定ヘッダーの高さ 16 if ($(target).length) { 17 var position = $(target).offset().top-headerHeight; 18 } 19 $('body,html').animate({scrollTop:position}, speed, 'swing'); 20 return false; 21 }); 22}); 23 24// ナビゲーションライン 25$(function () { 26 var set = 20;// 発火させる位置 27 var boxTop = new Array; 28 var current = -1; 29 //各セクションにpos_nowを付与 30 $('.pos_now').each(function (i) { 31 boxTop[i] = $(this).offset().top; 32 }); 33 changeBox(0); 34 $(window).scroll(function () { 35 scrollPosition = $(window).scrollTop(); 36 for (var i = boxTop.length - 1; i >= 0; i--) { 37 if ($(window).scrollTop() > boxTop[i] - set) { 38 changeBox(i); 39 break; 40 } 41 }; 42 }); 43 function changeBox(secNum) { 44 if (secNum != current) { 45 current = secNum; 46 secNum2 = secNum + 1; 47 $('.menu_list a').removeClass('link_current'); 48 49 if (current == 0) { 50 $('#link_01').addClass('link_current'); 51 } 52 else if (current == 1) { 53 $('#link_02').addClass('link_current'); 54 } 55 else if (current == 2) { 56 $('#link_03').addClass('link_current'); 57 } 58 else if (current == 3) { 59 $('#link_04').addClass('link_current'); 60 } 61 else if (current == 4) { 62 $('#link_05').addClass('link_current'); 63 } 64 else if (current == 5) { 65 $('#link_06').addClass('link_current'); 66 } 67 else if (current == 6) { 68 $('#link_07').addClass('link_current'); 69 } 70 else if (current == 7) { 71 $('#link_08').addClass('link_current'); 72 } 73 else if (current == 8) { 74 $('#link_09').addClass('link_current'); 75 } 76 else if (current == 9) { 77 $('#link_10').addClass('link_current'); 78 } 79 } 80 }; 81});

試したことは下記になります。
・アコーディオンの箇所をdisplay: none;ではなく、opacity:0;にて実装する方法で試したが解決しなかった

以上になります。不足している説明等ありましたら、ご指摘いただけますと幸いです。
ご教授何卒よろしくお願いいたしますm(__)m

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

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

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

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

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

guest

回答2

0

      分からない

投稿2022/04/10 12:29

tstetete

総合スコア2

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

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

0

ベストアンサー

jQuery

1boxTop[i] = $(this).offset().top;

ここでページにアクセスした際に、各セクションまでの距離を取得しています。

つまり、最初にアクセスした段階でセクション5の要素までの距離、高さはいくつで、その高さ分スクロールしたらセクション6の領域になると決まってしまいます。

しかし、セクション5はアコーディオン展開すると高さが変わってしまいます。
その為、不具合が起きるわけです。

ですので、これを解決するにはアコーディオンを開くボタンをクリックした際に、セクションの高さを再取得し直せば解決すると思います。

追記

いただいたアドバイスを参考に、また高さの取得方法を調べ、「もっと見る」ボタンをクリックした際に、セクションの高さを再取得するよう下記のように書き換えました。しかしうまく動作させることができませんでした。
もしよろしければ、高さを再取得する記述方法を教えていただけると嬉しく思います。
知識不足で申し訳ありません。何卒よろしくお願いいたしますm(__)m

もっと良いやり方は全然あると思いますが、いまのコードを活かすなら以下のような形で要望の動きにはなると思います。

function changeBox(secNum) {

};
の下に、

jQuery

1$(".more").on("click", function() { 2 setTimeout(function(){ 3 $('.pos_now').each(function (i) { 4 boxTop[i] = $(this).offset().top; 5 }); 6 changeBox(4); 7 }, 1000); 8});

を入れる。

投稿2022/04/10 09:24

編集2022/04/10 11:27
kinchannel

総合スコア111

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

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

kyonu

2022/04/10 09:52

初めまして。 分かりやすくご教授いただきありがとうございます! いただいたアドバイスを参考に、また高さの取得方法を調べ、「もっと見る」ボタンをクリックした際に、セクションの高さを再取得するよう下記のように書き換えました。しかしうまく動作させることができませんでした。 もしよろしければ、高さを再取得する記述方法を教えていただけると嬉しく思います。 知識不足で申し訳ありません。何卒よろしくお願いいたしますm(__)m // アコーディオン $(function(){ $(".more").on("click", function() { $('#jump_05').offset().top; $(this).toggleClass("on-click"); $(".hide").slideToggle(1000); }); });
kyonu

2022/04/10 12:02

ご返信とコードもありがとうございます! いただいたコードに変更したところ想定する動きになりました。 おっしゃっていただいているように、もっと良いやり方で実装できるよう鍛錬したいと思います。 この度は本当にありがとうございました。
kinchannel

2022/04/10 12:22

上手くいったようでよかったです^ ^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問