第 19 章 附加导航插件

学习要点：

1.附加导航插件

主讲教师：李炎恢

本节课我们主要学习一下 Bootstrap 中的附加导航插件。

一．附加导航

附加导航即粘贴在屏幕某处实现锚点功能。

//基本实例

  1. <body data-spy="scroll" data-target="#myScrollspy">
  3.     <div class="container">
  4.         <div class="jumbotron" style="height:150px">
  5.             <h1>Bootstrap Affix</h1>
  6.         </div>
  7.         <div class="row">
  8.             <div class="col-xs-3" id="myScrollspy">
  9.                 <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
  10.                     <li class="active">
  11.                         <a href="#section-1">第一部分 </a>
  12.                     </li>
  13.                     <li>
  14.                         <a href="#section-2">第二部分</a>
  15.                     </li>
  16.                     <li>
  17.                         <a href="#section-3">第三部分</a>
  18.                     </li>
  19.                     <li>
  20.                         <a href="#section-4">第四部分</a>
  21.                     </li>
  22.                     <li>
  23.                         <a href="#section-4">第五部分</a>
  24.                     </li>
  25.                 </ul>
  26.             </div>
  27.             <div class="col-xs-9">
  28.                 <h2 id="section-1">第一部分</h2>
  29.                 <p> ... </p>
  30.                 <h2 id="section-2">第二部分</h2>
  31.                 <p> ... </p>
  32.                 <h2 id="section-3">第三部分</h2>
  33.                 <p> ... </p>
  34.                 <h2 id="section-4">第四部分</h2>
  35.                 <p> ... </p>
  36.                 <h2 id="section-5">第四部分</h2>
  37.                 <p> ... </p>
  38.             </div>
  40.         </div>
  41.     </div>

//导航的 CSS 部分

  1. ul.nav-pills { width: 200px;
  2. } ul.nav-pills.affix { top: 30px;
  3. }

//JavaScript 代替 data-spy="affix" data-offset-top="125"

  1. $('#myAffix').affix({
  2.     offset : {
  3.         top : 150 }
  4. })

我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。

//设置成 bottom

  1. ul.nav-tabs.affix-bottom { bottom: 30px;
  2. }

//设置成 bottom

  1. $('#myAffix').affix({
  2.     offset : {
  3.         bottom : 150 }
  4. })

Affix 包含几个事件，如下：

第 19 章 附加导航插件 - 图1

//其他雷同

  1. $('#myAffix').on('affixed-top.bs.affix', function() {
  2.     alert('触发！');
  3. });

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/47.html