4.7.5　顶部固定或底部固定

4.7.5　顶部固定或底部固定

很多情况下，设计师都想让导航条固定在某个位置上。比如最顶部或者最底部。Bootstrap提供了两个强有力的样式支持这一特性，分别是：.navbar-fixed-top支持最顶部固定，.navbar-fixed-bottom支持最底部固定。示例用法如下：

<!-- 顶部固定 -->
<div class="navbar navbar-default navbar-fixed-top">
  ...
</div>
<!-- 底部固定 -->
<div class="navbar navbar-default navbar-fixed-bottom">
  ...
</div>

功能虽然强大，但实现原理却非常简单，主要是利用了position属性为fixed（绝对定位）的特性，然后设置元素容器的top或者bottom值为0即可。具体源码如下：

// 源码3724行
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;                      /* 固定定位 */
  right: 0;                     /* 左右不留空隙 */
  left: 0;
  z-index: 1030;                        /* 加大z-inedx，确保导航条在最上边，但小于modal弹窗
                                         的1040/1050 */
}
@media (min-width: 768px) {     /*普通宽屏浏览器下才取消圆角*/
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0; ;         /* 无圆角 */
  }
}
.navbar-fixed-top {
  top: 0;                               /* 固定在最顶部显示 */
  border-width: 0 0 1px;                /* 左右1像素边框 */
}
.navbar-fixed-bottom {
  bottom: 0;                    /* 固定在最底部显示 */
  margin-bottom: 0;             /* 底部不留空隙 */
  border-width: 1px 0 0;                /* 上下1像素边框 */
}

运行之后，读者可能会发现，导航条位置虽然固定了，但却带来一个问题，就是在顶部固定的情况下，页面最顶部的其他内容被遮盖住了（或者底部固定的情况下，网页最底部的内容也被遮盖住了）。原因很简单，就是fixed定位，网页最开头的元素（不管是否在导航条后面）在显示的时候都会从最顶部开始（0，0），然后导航条通过z-index覆盖在上面。要解决这个问题，需要在body上设置padding值。由于默认的navbar高度是50px，所以一般padding值设置为70px即可。示例如下：

<!-- 顶部固定的时候设置如下 -->
body { padding-top: 70px; }
<!-- 底部固定的时候设置如下 -->
body { padding-bottom: 70px; }

注意

❑上述两行代码不需要同时设置，只需要根据顶部固定（或底部固定）选择其一即可。

❑上述代码需要在调用bootstrap.css之后才能使用，以便覆盖bootstrap的默认设置。

另外还有一个.navbar-static-top样式，用于表示设置一个100%充满父元素容器的导航条。其实默认情况下使用navbar样式的时候也是100%充满宽度的，.navbar-static-top样式的唯一功能是去掉导航条的圆角设置。

// 源码3715行
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;                                /* 左右1像素边框 */
}
@media (min-width: 768px) {                     /*普通宽屏浏览器下才取消圆角*/
  .navbar-static-top {    border-radius: 0;     /* 取消圆角设置 */  }
}

4.7.5 顶部固定或底部固定