boostrap中scrollspy结合affix、以及affix的滚动与定位

affix结合scrollspy的干货：http://9iphp.com/web/javascript/understanding-bootstraps-affix-scrollspy-plugins.html 介个我真理解了好久，希望以后不要再那么效率低下惹。

关于被affix的对象（一般就是被加了data-spy="affix"叫ul的家伙）位置，可以分为滚动开始时的位置，滚动时的位置，滚动结束时的位置，对应的css类为affix-top, affix, affix-bottom， 就是说，在初始时，ul会被加上affix-top这个类，滚动时被切换到affix类，然后以affix-bottom类结束，这三个类是很关键的，毕竟决定了被滚对象的位置。
因为是固定在一边，看别人滚的，所以默认的滚动时的affix类是加了position:fixed属性的。 我们想设置他们的样式，给affix设置top or left，就决定了滚动时affix对于浏览器窗口的位置，至于affix-top，和affix-bottom例子：

$('#sub-nav').affix({
     offset: {
       top: $('#sub-nav').offset().top - 71,
       bottom: ($('footer').outerHeight(true) ) + 40 
     }
})

设置了affix-top（初始滚动位置）为当前位置（因为要设置滚动到一定位置时，固定，所以减去了一定高度），这再配合.affix就实现了滚动到一定程度后，固定的效果！ affix-bottom的位置为footer元素包括margin边距的高（.outerHieght(true)要加true。。） 加上下面为之设置的边距，这样就设置好了三个对应的位置。

boostrap中affix的一个bug：宽度的改变！
如果不设置width的时候， 发现往下一滚，我曹，变瘦了。
稍微来分析一下，因为ul的父元素我加了col-md col-sm 等类，所以栅格响应式的，不同的窗口大小，父元素的宽度也不同，那我们直接让ul的宽度在affix的三个状态中都等于父元素的宽度不就好了？！听起来不错！行动试试！$('#nav-menu').width($('#aside').width());这句就能实现，但是记得要外面加一个$(window).resize()事件，这样才能在窗口大小变化时，重新设置一下ul的宽度，最后再记得运行一下$(window).resize;下面是代码：

// affixWidth();
$(window).resize(function () {
     $('#sub-nav').width($('#aside-bar').width());
 });
 $(window).resize();

介个代码是我从git里找到的哈哈哈哈嘻嘻嘻嘻嘻………。

然后记得scrollspy一下介个ul：data-spy="affix"，元素加一下data-spy="scroll" data-target="#aside"这两个属性，表示body滚动的时候监听ul的父元素。下次好好说一下scrollspy吧诶。