【Bootstrap】Scrollspy実装にはnav-linkが必要です。

【Bootstrap】Scrollspy実装にはnav-linkが必要です。



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

BootstrapでScrollspyを実装しようとしていたところ、うまくそれぞれのリンクにactiveクラスが付かない。

<body data-spy="scroll" data-target=".target">
	<div class="target">
		<a href="#section1">Section1</a>
		<a href="#section2">Section1</a>
		<a href="#section3">Section1</a>
	</div>
	<div id="section1">
	...
	</div>
	<div id="section2">
	...
	</div>
	<div id="section3">
	...
	</div>
</body>

そこで検証してみたところ、ドキュメントには特に書かれていないようですが、

<body data-spy="scroll" data-target=".target">
	<div class="target">
		<a class="nav-link" href="#section1">Section1</a>
		<a class="nav-link" href="#section2">Section1</a>
		<a class="nav-link" href="#section3">Section1</a>
	</div>
	<div id="section1">
	...
	</div>
	<div id="section2">
	...
	</div>
	<div id="section3">
	...
	</div>
</body>

のように、リンクにclass="nav-link"を付ける必要があることがわかりました。

Scrollspy
参考
Scrollspy

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Scrollspy

今日はここまで

コメントを残す

メールアドレスが公開されることはありません。