5.4.1　声明式用法

在平时使用过程中，滚动侦测一般有两种用法，一种是像上面的那样固定一个元素的高度，进行滚动，然后对相应的菜单进行高亮显示；另外一种是对整个页面（body）进行滚动侦测。两种方式的用法一样，都需要有如下3个步骤：

1）设置滚动容器，即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性。

2）设置菜单链接容器，该容器的id（或样式）和data-target属性所对应的选择符应一致。

3）在菜单容器内，必须有.nav样式的元素，并且在其内部有li元素，li内包含的a元素才是可以侦测高亮的菜单链接，即符合.nav li > a这种选择符的条件。

第一种用法示例如下：

  1. <div id="selector"><!-- 菜单容器 -->
  2.     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  3.         <ul class="nav navbar-nav">
  4.             <li class="active"><a href="#fat">@fat</a></li><!-- 第1个链接 -->
  5.             <li class=""><a href="#mdo">@mdo</a></li><!-- 第2个链接 -->
  6.             <li class="dropdown">
  7.                 <a data-toggle="dropdown" class="dropdown-toggle" href=
  8.                     "#">Dropdown <b class="caret"></b></a>
  9.                 <ul class="dropdown-menu">
  10.                     <li class=""><a href="#one">one</a></li><!-- 第3个链接 -->
  11.                     <li class=""><a href="#two">two</a></li><!-- 第4个链接 -->
  12.                     <li class="divider"></li>
  13.                     <li class=""><a href="#three">three</a></li><!-- 第5个链接 -->
  14.                 </ul>
  15.             </li>
  16.         </ul>
  17.     </nav>
  18. </div>
  19. <!—滚动侦测区域 -->
  20. <div data-offset="0" data-target="#selector" data-spy="scroll" style="
  21.     确保设置了固定高度，并且overflow: auto">
  22.     <h4 id="fat">@fat</h4><p>具体内容</p>
  23.     <h4 id="mdo">@mdo</h4><p>具体内容</p>
  24.     <h4 id="one">one</h4><p>具体内容</p>
  25.     <h4 id="two">two</h4><p>具体内容</p>
  26.     <h4 id="three">three</h4><p>具体内容</p>
  27. </div>

第二种用法示例和第一种类似，只不过将滚动侦测容器挪到了body上，而nav一定要在body内部。

  1. <body data-target="#selector" data-spy="scroll">
  2.     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id=" selector ">
  3.         ...
  4.     </nav>
  5.     <h4 id="fat">@fat</h4>
  6.     <p>具体内容</p>
  7.     <!-- 省略其他链接 -->
  8. </body>

从上述两个例子可以看出，除了两个容器以外，滚动侦测容器内必须有上述菜单项链接所对应的id选择符，即如果要高亮显示href="#fat"所在的菜单，就必须有id="fat"的元素，其显示范围超过当前滚动区域才行。