Intersection Observer を使ったアンカーリンクナビ

Intersection Observerを使ったアンカーリンクのナビゲーションを作ってみました。
要素の位置に応じて、ナビゲーションのマーカーが表示される仕組みです。

インターセクションオブザーバーについての解説記事はこちら

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

サンプルの内容が思いつかなかったのでオススメのPC周りのグッズを紹介しておきます。

• オススメ1
• オススメ2
• オススメ3
• オススメ4

WEBカメラ C920n とUSB切替器

ロジクールのWEBカメラC920nを2台のPCで共有するためにUSBスイッチャーを導入した記事です。

USBスイッチャーがあるおかげでUSBの付け替えが不要で楽ちんです。

詳細はこちら

ロジクールの高機能高級ワイヤレスキーボード CRAFT

ロジクールが出している高級ワイヤレスキーボードCRAFT(KX1000s)。キーストロークが浅めが好みの私にはドンピシャのお気に入りキーボードになりました。

これも2台のPCをボタン1つで切り替えて、共通して使える優れモノ。

詳細はこちら

フットレストで腰への負担を軽減しよう

イスに座った状態で足を伸ばすと、地面に接地する距離が少し遠く、太ももや腰に負担がかかるのでフットレストを導入しました。

あぐら姿勢で仕事することが多かったのですが、フットレストを導入してから少し姿勢が良くなった気がします。

詳細はこちら

HUAWEI ウルトラワイドモニター MateView GT

でかいモニターに慣れるともう小さいモニターでは仕事する気になれません。1画面で得られる情報量は多い方が色々楽です。

ワイドモニターに縦置きのモニターがあれば、完璧な作業環境が手に入ります。

詳細はこちら

サイト内のアンカーリンクナビをCSSのstickyで固定して、クリックするとアンカーリンクで移動する仕組みです。

要素に入ったらナビゲーションのラインアニメーションを発動

今回のサンプルはスクロールに応じて、アンカーリンクのナビゲーションのラインが表示されるという仕組みです。

スクロール監視ということで「Intersection Observer」を利用した仕組みになっています。

ナビゲーション部のHTMLソース

ナビゲーションは普通に作られています。

<ul id="unker_nav">
	<li><a href="#pos1">オススメ1</a></li>
	<li><a href="#pos2">オススメ2</a></li>
	<li><a href="#pos3">オススメ3</a></li>
	<li><a href="#pos4">オススメ4</a></li>
</ul>

監視ターゲットのHTMLソース

こちらは監視要素を共通のクラス「inter_pos」を設定し、data属性を使ってナンバリングをしています。
ナビゲーションのインデックス番号とリンクさせるためのナンバリングです。

<div id="pos1" class="inter_pos" data-num="0">
<h3>pos1</h3>
</div>
		
<div id="pos2" class="inter_pos" data-num="1">
<h3>pos2</h3>
</div>

<div id="pos3" class="inter_pos" data-num="2">
<h3>pos3</h3>
</div>

<div id="pos4" class="inter_pos" data-num="3">
<h3>pos4</h3>
</div>

実際のサンプルソースとは異なりますが、説明に不要な個所は省いています。

Intersection Observerを設定しているJavaScript

インターセクションオブザーバーのスタンダードな使い方になっていますが、今回は監視対象と、クラスを付与する要素が異なります。

交差した要素のdata-numに振られた数値を取得し、その数値をliのインデックスとして利用し、そのliにクラスを付与＆削除する仕組みです。

//▼監視対象
const target_item = document.querySelectorAll(".inter_pos");

//▼ナビゲーションのliを取得
const unker_nav = document.querySelectorAll("#unker_nav li");	
	
window.addEventListener("load", (event) => {
	let vh = document.documentElement.clientHeight;
	let nav_vh = document.getElementById('unker_nav').clientHeight;
	let head_vh = document.getElementById('header_box').clientHeight;
	let fix_vh = nav_vh + head_vh + 20;
	var zan_vh = vh - fix_vh;	
	createObserver(zan_vh, fix_vh);	
}, false);

function createObserver(zan_vh, fix_vh) {	
	let options = {
		root: null,
		rootMargin: "-" + fix_vh + "px 0px  -" + zan_vh + "px 0px",				
		threshold: 0
	};
	let main_observer;
	main_observer = new IntersectionObserver(nav_set, options);
	target_item.forEach( (elem) => {
		main_observer.observe(elem);
	});  
}	

function nav_set(entries){	
	entries.forEach(entry => {
		//▼data-numの取得
		let set_num = entry.target.dataset.num
		if (entry.isIntersecting) {
			//▼取得したdata-numを使ってアクティブなliにクラス付与
			unker_nav[set_num].classList.add("sample_on");			
		}else{
			//▼交差範囲から外れたらクラスを外す
			unker_nav[set_num].classList.remove("sample_on");			
		}				
	});
}

ナビの当たり判定を可能な限り正確にしたくて、ごちゃごちゃと色々やってます。
11行目～16行目です。

JavaScriptで各要素の高さを取得して、計算して出しています。

適切なrootMarginの求め方

rootMarginの調整で、交差範囲をアンカーナビのところに持ってくるのに苦労しました。
色々と試行錯誤してこの形になりました。

最初はざっくりと-80%とかで設定していたんですが、ウィンドウサイズを変更すると交差範囲がずれるのが気に入らなくて、なるたけ厳密に求めるようにしました。
これが正しいかどうかは不明ですが、とりあえず納得できる動きになりました。

JavaScriptを使ってそれぞれの要素の高さを取得し、関数の引数にあてて適用してます。

もっとちゃんとやるとしたら、閲覧中にウィンドウサイズが変更された際に、全ての高さを再取得する必要があります。
そこまではいいかなと思ってやってません。

CSSアニメーションで動きをつける

メインのJavaScriptの解説は終わったので、CSSを簡単に紹介して終わりたいと思います。

#unker_nav {
	display: flex;	
	width: 100%;
	justify-content: space-between;
	position: sticky;
	z-index: 1;
	top: 70px;
	background: rgba(0,0,0,0.8);
	padding-bottom: 4px;	
}
	
#unker_nav li{
	width: 24.5%;
	text-align: center;	
	transition: all 0.3s 0s ease;	
}
	
#unker_nav li a{
	display: block;
	padding: 4px 0;
	color: #fff;
	box-sizing: border-box;
}

#unker_nav li:hover{
	background: #000;
	opacity: 0.8;
}

.sample_on{
	background: #000;
	position: relative;
}	

.sample_on::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 3px #c00;
	animation: border_anim 0.2s ease-in forwards;
}

@keyframes border_anim { 
	0% { width: 0%; }
	30% { width: 50%; }
	100% { width: 100%; } 
}

@media screen and (max-width: 640px){
	#unker_nav {
		top:41.5px;
	}
}	

#unker_navを 「postion: sticky;」 で固定しています。

44行目の「@keyframes border_anim」でアニメーション効果を作って、交差した時にラインアニメーションを適用しています。

その他は主にレイアウトのCSSですね。
※関係なスタイルは省いています。

Intersection Observer を使ったアンカーリンクナビ まとめ

今回のナビゲーションも前回に引き続き、仕事で使ったんですが、交差範囲の設定が甘くてもうちょっと完成度を高めたかったのですが、納期の都合で許容範囲までしか詰め切れず。

というわけで、インターセクションオブザーバーの使用例も兼ねて、研究してみました。

アンカーナビのアニメーションとアクティブ判定がいらなければ、交差監視は不要です。
だけど、ちょっとした遊び心とユーザビリティを加えたくなるじゃないですか。

こういう売上や成果に直結するとは言い難い、パーツや動き、仕組みなんかをどれだけ持っているかを私は結構大事にしています。

仕事で詰め切れないことを自分のサイトで突き詰めて、次に仕事に生かすと。

またインターセクションオブザーバーを使って、なにかを作りたいとおもいます！

WEBデザイナー・プログラミング学習にオススメ

WEBデザインが学べるWEBデザインコース テックアカデミー

週2回のマンツーマンでのメンタリングや毎日15時～23時のチャット･レビューサポートなど短期間でオリジナルサイトをデザインできるようになる学習プログラムです。
1件目の副業紹介を100%紹介してくれるので、副業を始めたい方にオススメのコースになっています。