ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。
参考サイト
www.e-creators.net
「offset().top」と「scrollTop()」を理解する
offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド
scrollTop
「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。
$(window).scroll(function() { console.log($(this).scrollTop()); })
offsetメソッド
document内に配置した要素の位置を座標で取得できるメソッドになります。「top(Y座標)」と「left(X座標)」が取得出来ます
var Pos=$('#box').offset().top; console.log(Pos);
HTML部分
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フェリカ・テクニカル・アカデミーの生徒募集ページ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>ロゴ</h1> <nav id="g-nav"> <ul> <li id="list01" class="current"><a class="scroll" href="#">トップ</a></li> <li id="list02"><a class="scroll" href="#recommend">おすすめな理由</a></li> <li id="list03"><a class="scroll" href="#student">生徒の作品</a></li> <li id="list04"><a class="scroll" href="#access">アクセス</a></li> <li id="list05"><a class="scroll" href="#apply">お申し込みはこちら</a></li> </ul> </nav> </header> <div class="content" id="top"> <h2>メインビジュアル</h2> </div> <div class="content" id="recommend"> <h2>おすすめな3つ理由</h2> </div> <div class="content" id="student"> <h2>生徒の作品</h2> </div> <div class="content" id="access"> <h2>アクセス</h2> </div> <div class="content" id="apply"> <h2>お申込み</h2> </div> <footer></footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html>
jQuery部分
$(window).on('load resize',function(){ let pos01 = 0; let pos02 = Math.round($('#recommend').offset().top); let pos03 = Math.round($('#student').offset().top); let pos04 = Math.round($('#access').offset().top); let pos05 = Math.round($('#apply').offset().top); $(window).on('load resize scroll',function(){ let posScroll = $(window).scrollTop();//自身のスクロール量 if(pos01 < posScroll && pos02 > posScroll){ $('#list01').addClass('current').siblings('li').removeClass('current'); }else if(pos02 < posScroll && pos03 > posScroll){ $('#list02').addClass('current').siblings('li').removeClass('current'); }else if(pos03 < posScroll && pos04 > posScroll){ $('#list03').addClass('current').siblings('li').removeClass('current'); }else if(pos04 < posScroll && pos05 > posScroll){ $('#list04').addClass('current').siblings('li').removeClass('current'); }else if(pos05 < posScroll){ $('#list05').addClass('current').siblings('li').removeClass('current'); } }); //スムーススクロール $('a.scroll[href^="#"]').on('click',function(){ var a= $(this).attr('href'); //正規表現を加える var target = $(a == "#" || a == "" ? 'html' : a); // 移動先を数値で取得 var position = $(target).offset().top; $('body,html').animate({scrollTop:position}); }); });