现学现卖,如有错误,感谢指出!

一.Affix运行的大致流程

1
2
3
4
5
6
7
8
$('#SomeNav').affix({
  offset: {
      top: 617,
      bottom: function () {
      return (this.bottom = $('#Footer').outerHeight(true))
    }
  }
})

根据设定的top与bottom,侧边栏会使用三种样式

一开始滚动距离没有达到top时,侧边栏使用aiffx-top样式

当滚动超过top时,侧边栏使用aiffx样式,aiffx默认把侧边栏position设为fixed

此时需要固定在顶部,遂定义如下样式

1
2
3
.bs-docs-sidebar.affix{
    top:30px;
}

当距离页尾bottom内时,侧边栏使用aiffx-bottom样式,aiffx会自动计算样式的top,不过这时候position没有定义

不定义position默认是static,会回到文档流,所以碰到页尾就会弹回原位置,这是我们不想要的,遂定义

1
2
3
.bs-docs-sidebar.affix-bottom{
    position:absolute;
}

使其根据自动计算的样式的top定位

二.宽度消失变形的解决方案

不过还有一个问题,当使用aiffx样式时候,导航栏脱离了文本流,所以col-xx-xx宽度失效

官方的解决方案是使用媒体查询直接定义其宽度

1
2
3
4
5
6
7
8
9
10
@media screen and (min-width: 992px) {
  .bs-docs-sidebar {
    width: 213px;
  }
}
@media screen and (min-width: 1200px) {
  .bs-docs-sidebar {
    width: 257px;
  }
}