来自：慕课网
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>