Webページにおいて、閲覧中のセクションに対応したページメニューを装飾するコードを書いています。
javascriptのscrollイベントで実装するのが一般的だと考え、一応jQueryでそのまま書いてみたのですが、処理が増えた時のスクロールジャンクが怖いです。ということで、いくつか改善策を見つけました。
- setTimeout()
- lodash.throttle()
- requestAnimationFrame()
- Intersection Observer
今回のケースに見合う改善策について、ご教授いただけないでしょうか。
さらに、下記に作成したコードがありますので、修正できる箇所があればご指摘いただけると幸いです。
よろしくお願いいたします。
javascript
1$(window).scroll(function(){ 2 var doch = $(document).innerHeight(); //ページ全体の高さ 3 var winh = $(window).innerHeight(); //ウィンドウの高さ 4 var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置 5 6 if($(window).scrollTop() > $('#sec1').offset().top && $(window).scrollTop() < $('#sec2').offset().top){ 7 $('.o-pageNav__item').removeClass('is-active'); 8 $('#menu-sec1').addClass('is-active'); 9 } 10 else if($(window).scrollTop() > $('#sec2').offset().top && $(window).scrollTop() < $('#sec3').offset().top){ 11 $('.o-pageNav__item').removeClass('is-active'); 12 $('#menu-sec2').addClass('is-active'); 13 } 14 else if($(window).scrollTop() > $('#sec3').offset().top){ 15 $('.o-pageNav__item').removeClass('is-active'); 16 $('#menu-sec3').addClass('is-active'); 17 // 最終コンテンツがデバイスの高さに届かなかった場合、強制的に切り替える。 18 if($(window).scrollTop() > $('#sec4').offset().top || $(window).scrollTop() >= bottom){ 19 $('.o-pageNav__item').removeClass('is-active'); 20 $('#menu-sec4').addClass('is-active'); 21 } 22 } 23 else{ 24 $('.o-pageNav__item').removeClass('is-active'); 25 $('#menu-sec0').addClass('is-active'); 26 } 27});
html
1<!-- ページメニュー --> 2<nav class="o-pageNav"> 3 <ul class="o-pageNav__list"> 4 <li class="o-pageNav__item" id="menu-sec0"><a href="#sec1" class="o-pageNav__link">sec0</a></li> 5 <li class="o-pageNav__item" id="menu-sec1"><a href="#sec1" class="o-pageNav__link">sec1</a></li> 6 <li class="o-pageNav__item" id="menu-sec2"><a href="#sec1" class="o-pageNav__link">sec2</a></li> 7 <li class="o-pageNav__item" id="menu-sec3"><a href="#sec1" class="o-pageNav__link">sec3</a></li> 8 <li class="o-pageNav__item" id="menu-sec4"><a href="#sec1" class="o-pageNav__link">sec4</a></li> 9 <li class="o-pageNav__item" id="menu-sec5"><a href="#sec1" class="o-pageNav__link">sec5</a></li> 10 </ul> 11</nav> 12 13<!-- 各セクション --> 14<div id="sec0" style="height: 500px;width: 100%;background-color: aliceblue;"></div> 15<div id="sec1" style="height: 500px;width: 100%;background-color: aliceblue;"></div> 16<div id="sec2" style="height: 500px;width: 100%;background-color: antiquewhite;"></div> 17<div id="sec3" style="height: 500px;width: 100%;background-color: aquamarine;"></div> 18<div id="sec4" style="height: 500px;width: 100%;background-color: beige;"></div> 19<div id="sec5" style="height: 500px;width: 100%;background-color: darkslategray;"></div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。