Bootstrap技巧之跟随导航（bootstrap官网入口制作一个导航栏）

bootstrap作为当前最流行的前端框架，可以使我们高效的开发网站。

下面简单的介绍一下，bootstrap的跟随导航的设置。

在设置之前，需要引入bootstrap的css和js文件，如下：

跟随导航，不知道哪位大侠起的名字，挺形象的。其实就是导航菜单跟着垂直滚动条的向下滚动时，当滚动距离超过了导航的高度和位置的时候，导航变为固定到网页的头部；当返回顶部的时候，导航菜单恢复原样。

在bootstrap中有一个JavaScript组件，叫做 Affix 。下面我们看看它的用法：

最简单的方法通过css调用：

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">

</div>

• data-spy="affix" 自定义属性，在需要固定顶部的导航上加上。

• data-offset-top="60" 距离顶部的距离的数值，超过这个数值affix才生效。

• data-offset-bottom="200" 距离底部的距离，什么位置消失

一般情况下，设置前2个参数，即可达到目的。