WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スクロール位置に応じてナビゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。


参考サイト
www.e-creators.net


www.nagahama-kannon-house.jp


「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});
});


});

liginc.co.jp