Bootstrap 3でScrollspy(スクロールスパイ)機能を試して見る

2013年12月29日 16時11分

201312291611HCSW00.png

はじめに

Bootstrap 3を試してみるシリーズの第7弾は、BootstrapのGetting startedでも使用され、当サイトでも使用している見出しの自動スクロールを行うScrollspyを試してみます。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

Scrollspyの使用方法

公式ドキュメントでは、NavigatinBarの例が載っていますが、より実践的に使用できるサンプルを作成します。

お約束のbootstrap.min.[cs,js] + jquery-1.10.2.min.jsを 指定して、HTMLを作成します。

  1. スクロールするコンテンツの指定

    bodyタグに、スクロールを追跡するための設定を行います。

    <body
      data-spy="scroll"
      data-target=".sidebar"
    >
    

    指定する属性は、以下のとおりです。

    属性名概要
    data-spyscrollを指定します。
    data-target自動スクロールを追跡するクラスを指定します。
  2. 見出しの作成

    コンテンツの見出しを作成します。
    作成の際には、nav-tabsまたは、nav-pillsクラスを使用する必要があります。
    他のクラスを指定すると、見出しの追跡ができなくなりますので、注意して下さい。

    <div class="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><h4>Table of Contents</h4></li>
        <li><a href="#chap1">Chapter #1</a></li>
        <li><a href="#chap2">Chapter ##2</a></li>
        <li><a href="#chap3">Chapter ###3</a></li>
        <li><a href="#chap4">Chapter ####4</a></li>
        <li><a href="#chap5">Chapter #####5</a></li>
      </ul>
    </div><!-- sidebar -->
    
  3. 本文の作成

    コンテンツの本文を作成します。本文には、見出しで指定したリンクのIDを指定します。

    <article id="chap1"><h4>Chapter 1</h4></article>
    <article id="chap2"><h4>Chapter 2</h4></article>
    
  4. JavaScriptの追加

    見出しを追跡できるように、JavaScriptを追加します。
    targetには、bodyタグに指定したdata-targetと同じクラス名を指定します。

    <script>
      $('body').scrollspy({ target: '.sidebar' })
    </script>
    
  5. スタイルの追加

    ここまでの作業で、見出しの追跡はできるようになりましたが、表示された見出しがスクロールによって見えなくならないようにするため、見出しの表示位置を固定しています。
    また、nav-pillsクラスの初期値のままだと、見出しの行間が広すぎるため、行間を狭くしています。

    <style>
      body { margin-top: 80px; }
      .sidebar ul { position: fixed; }
      .sidebar li > a { padding: 5px 10px; }
    </style>
    
    029.html
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>029</title>
    
        <link href="bootstrap.min.css" rel="stylesheet">
        <style>
          body { margin-top: 80px; }
          .sidebar ul { position: fixed; }
          .sidebar li > a { padding: 5px 10px; }
    
          article { height:300px; margin-top:20px; padding: 10px; }
          #chap1 { background: #b2b2b2; }
          #chap2 { background: #ddded3; }
          #chap3 { background: #d1b6b0; }
          #chap4 { background: #fadebc; }
          #chap5 { background: #9fc5ba; }
        </style>
      </head>
    
      <body data-spy="scroll" data-target=".sidebar">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header"><h1>navbar-fixed-top</h1></div>
            <div class="navbar-collapse collapse"></div>
          </div>
        </div>
    
        <div class="container">
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3">
              <div class="container-fluid">
                <div class="sidebar">
                  <ul class="nav nav-pills nav-stacked">
                    <li><h4>Table of Contents</h4></li>
                    <li><a href="#chap1">Chapter #1</a></li>
                    <li><a href="#chap2">Chapter ##2</a></li>
                    <li><a href="#chap3">Chapter ###3</a></li>
                    <li><a href="#chap4">Chapter ####4</a></li>
                    <li><a href="#chap5">Chapter #####5</a></li>
                  </ul>
                </div><!-- sidebar -->
              </div><!-- container-fluid -->
            </div><!-- col-3 -->
    
            <!-- メインコンテンツ -->
            <div class="col-xs-6 col-sm-6 col-md-6">
              <div class="container-fluid">
                <article id="chap1"><h4>Chapter 1</h4></article>
                <article id="chap2"><h4>Chapter 2</h4></article>
                <article id="chap3"><h4>Chapter 3</h4></article>
                <article id="chap4"><h4>Chapter 4</h4></article>
                <article id="chap5"><h4>Chapter 5</h4></article>
              </div><!-- container-fluid -->
            </div><!-- col-6 -->
    
            <div class="col-xs-3 col-sm-3 col-md-3"></div><!-- col-2 -->
          </div><!-- row -->
        </div><!-- container -->
    
        <script src="jquery-1.10.2.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
          $('body').scrollspy({ target: '.sidebar' })
        </script>
      </body>
    </html>
    
    201312291611HCSW01.png
    デモは、029.htmlからご覧頂けます。
    ファイルは、029.zipからダウンロードできます。