とほほのBootstrap 4入門

スクロールスパイ

スクロールスパイはメニュー(ナビゲーションバー、またはリストグループ)に応じて本文をスクロールします。また、本文のスクロールを監視し、スクロールに応じてメニューの該当アイテムをアクティブにします。

Sample

Section #1

Section #2

Section #3

下記にサンプルを示します。スクロールを監視する対象に対して scrollspy() を呼び出すことにより監視が始まります。

Code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
<title>Scrollspy Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<style>
body {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
#example-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8rem;
  z-index: 1;
  background-color: #f6f6f6;
}
#example-main {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding-left: 8.5rem;
  overflow-y: scroll;
}
</style>
<script>
$(function() {
  $('#example-main').scrollspy({offset:$(window).height() / 2});
});
</script>
<body>
<h4>サンプル</h4>
<div id="example-menu" class="list-group">
  <a class="list-group-item list-group-item-action active" href="#section-1">Section #1</a>
  <a class="list-group-item list-group-item-action" href="#section-2">Section #2</a>
  <a class="list-group-item list-group-item-action" href="#section-3">Section #3</a>
</div>
<div id="example-main">
  <h1 id="section-1">Section #1</h1>
  <p style="height:800px">...</p>
  <h1 id="section-2">Section #2</h1>
  <p style="height:800px">...</p>
  <h1 id="section-3">Section #3</h1>
  <p style="height:800px">...</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>  
</html>

監視する対象が body の場合は scrollspy() は不要です。代わりに body 要素に data-spy="scroll", data-target="..." を指定します。下記の例ではナビゲーションバーをウィンドウの最上部部に張り付けています。ナビゲーションバー分のオフセットを得るために body に margin-top を指定し、メニュークリック時にオフセット分スクロールを戻しています。

Code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
<title>Scrollspy Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<style>
body {
  margin-top: 56px;
}
</style>
<script>
$(function() {
  var offset = 56;
  $('.navbar li a').click(function(event) {
    event.preventDefault();
    location.replace($(this).attr('href'));
    window.scrollBy(0, -offset);
  });
});
</script>
<body data-spy="scroll" data-target="#navbar1" data-offset="100">
<nav class="navbar fixed-top navbar-dark bg-dark" id="navbar1">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#section-1">Section #1</a></li>
    <li class="nav-item"><a class="nav-link" href="#section-2">Section #2</a></li>
    <li class="nav-item"><a class="nav-link" href="#section-3">Section #3</a></li>
  </ul>
</nav>
<h1 id="section-1">Section #1</h1>
<p style="height:800px">...</p>
<h1 id="section-2">Section #2</h1>
<p style="height:800px">...</p>
<h1 id="section-3">Section #3</h1>
<p style="height:800px">...</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>  
</html>

オプション

Code

<body data-spy="scroll" data-target="#navbar1" data-offset="100">
  ...
</body>

Code

$(...).scrollspy({target:'#navbar1', offset:100});

名前	型	規定値	説明
`offset`	number	10	トップからの距離がこの値以下になった時に、アクティブ要素を変更します。
`method`	string	auto	監視方法を指定します。`offset` は jQuery の offset メソッドを用いて、`position` は jQuery の position メソッドを用いて監視します。`auto` を指定すると適切なメソッドを自動判断します。
`target`	string	(なし)	監視結果を反映するメニュー(ナビゲーションバーまたはリストグループ)を指定します。

初版:2015年9月6日最終更新:2019年1月6日

https://www.tohoho-web.com/bootstrap/scrollspy.html