來自：慕課網
http://www.imooc.com/code/5396
Affix 效果常見的有以下三種：
☑ 頂部固定
☑ 側邊欄固定
☑ 底部固定
固定定位--聲明式觸發固定定位
Affix 插件可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發。其主要包括兩個參數：
1、data-spy：取值 affix，表示元素固定不變的。
2、data-offset：整數值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。
- data-offset-top 用來設置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當用戶從頂部向下拖動滾動條，當滾動的距離大於 90px 時，affix 元素不再滾動，就會固定在瀏覽器窗口頂部。
- data-offset-bottom 剛好與 data-offset-top 相反。
具體使用如下：
<div data-spy="affix" data-offset="90">affix元素</div>
分開設置 data-offset 值方式：
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
注意，在 body 要聲明滾動監控。
<body data-spy="scroll" data-target="sidebarMenu">
注意，請在寬屏模式下查看效果。據我測試下來，使用聲明式，就算設置了 data-offset-top 的值也會失效，需要在樣式中給 affix 設置一個top值，與 data-offset-top 值相等。data-offset-bottom一樣。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加導航（Affix）插件</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!--<style type="text/css"> /* Custom Styles */ ul.nav-tabs { width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li { margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child { border-top: none; } ul.nav-tabs li a { margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover { color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a { border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a { border-radius: 0 0 4px 4px; } ul.nav-tabs.affix { top: 30px; /* Set the top position of pinned element */ } </style>--> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <!--<div class="jumbotron"> <h1>Bootstrap Affix</h1> </div>--> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> <li class="active"><a href="#section-1">第一部分</a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-5">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <hr> <h2 id="section-2">第二部分</h2> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <hr> <h2 id="section-3">第三部分</h2> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <hr> <h2 id="section-4">第四部分</h2> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <hr> <h2 id="section-5">第五部分</h2> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>