追従するサイドのナビゲーションと横並びでFAQ
のようをがあります。
現在地の取得で.js-accordion-title.openでFAQのアコーディオンの開いたままスクロールすると全体の高さが増え、サイドのナビゲーション(.p-how-to-use-faq-nav)の.js-curnav-switch.is-currentの付与するタイミングがアコーディオンの高さ分早くなってしまうのでアコーディオンが開いたままの時でも高さを取得しない方法はありますでしょうか。
<nav class="p-how-to-use-faq-nav"> <ul> <li> <a class="js-curnav-switch" href="#about" >サイドメニュー</a > </li> <li> <a class="js-curnav-switch" href="#tip" >サイドメニュー</a > </li> <li> <a class="js-curnav-switch" href="#dirt" >サイドメニュー</a > </li> <li> <a class="js-curnav-switch" href="#other" >サイドメニュー</a > </li> </ul> </nav> <section class="p-how-to-use-faq" id="about"> <div class="p-how-to-use-faq-accordion-title-wrap js-accordion-title"> <div class="p-how-to-use-faq-accordion-title-block"> <img src="img/q.svg" alt="" /> <h5 class="p-how-to-use-faq-accordion-title-txt"> 質問タイトル </h5> </div> <span class="p-how-to-use-faq-accordion-title-plus"></span> </div> <!-- /.accordion-title --> <div class="p-how-to-use-faq-accordion-text-wrap"> <div class="p-how-to-use-faq-accordion-text-block"> <img src="img/a.svg" alt="" /> <p class="p-how-to-use-faq-accordion-text-answer"> 回答 </p> </div> </div> </section> <section class="p-how-to-use-faq" id="tip"></section> <section class="p-how-to-use-faq" id="dirt"></section> <section class="p-how-to-use-faq" id="other></section>
<style> .js-curnav-switch.is-current { color: #fff; background-color: #e57893; transition: color 0.3s ease; border: 0.07em solid #000; } </style> /* FAQ アコーディオン*/ $(function () { $(".js-accordion-title").click(function () { $(this).toggleClass("open"); $(this).next().slideToggle(); }); }); /* 現在地 */ $(function () { var navLink = $(".js-curnav-switch"); var headerHeight = $(".c-header").outerHeight(); // ヘッダーの高さを取得 var contentsArr = new Array(); for (var i = 0; i < navLink.length; i++) { var targetContents = navLink.eq(i).attr("href"); if (targetContents.charAt(0) == "#") { var targetSection = $(targetContents); if (targetSection.length) { var targetContentsTop = targetSection.offset().top - headerHeight - 1; var targetContentsBottom = targetContentsTop + targetSection.outerHeight(true) - 1; contentsArr.push([targetContentsTop, targetContentsBottom]); } } } function currentCheck() { var windowScrolltop = $(window).scrollTop(); var found = false; for (var i = 0; i < contentsArr.length; i++) { if ( contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop ) { navLink.removeClass("is-current"); navLink.eq(i).addClass("is-current"); found = true; break; } } if (!found) { navLink.removeClass("is-current"); navLink.eq(0).addClass("is-current"); // 最初の要素に is-current クラスを追加する } } $(window).on("load scroll", function () { requestAnimationFrame(currentCheck); }); navLink.click(function (e) { e.preventDefault(); var targetId = $(this).attr("href"); var targetOffset = $(targetId).offset().top - headerHeight; $("html, body").stop().animate( { scrollTop: targetOffset, }, 300 ); requestAnimationFrame(function () { navLink.removeClass("is-current"); $(targetId).addClass("is-current"); }); }); });

0 コメント