bootstrap-affix.js组件，直译过来就是固定，典型的应用就是导航，即当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航(下图)。其实这组件很简单，就是通过检测滚动位置来动态的添加或移除 affix 、 affix-top 、 affix-bottom 三个样式，来使导航仍然处在一个合适的位置。当采用标记法，页面加载完毕时，JS插件会搜索页面上所有[data-spy="affix"]的元素，然后找其data-offset-top或data-offset-bottom属性，即离页面顶(底)部少于多少px，然后添加或移除上面的三个样式。
CSS定义
首先看一下css定义，这里需要注意的是，官方的bootstrap.css 文件里面没有定义bottom样式，需要开发者自己定义。
-
.affix {
-
top: 40px;
-
}
-
-
.affix-bottom {
-
position: absolute;
-
top: auto;
-
bottom: 270px;
-
}
如何使用
和其他bootstrap插件一样也有俩种设置方法。
HTML data方式
添加附加导航单, 只需把 data-spy="affix" 添加到你想监视的元素上. 然后使用偏移量来确定一个元素的开和关.
...
使用JavaScript
$('#navbar').affix()
问题
实施之后发现，导航列表抖动的很明显，而网上介绍的设置body样式的方法也没有作用。
$('body').css('position','relative');
无奈参考了官网定时器的方法，搞定
-
setTimeout(function () {
-
$('#my_tabs').affix({
-
offset: {
-
top: function () { return $(window).width() <= 980 ? 290 : 210 }
-
, bottom: 270
-
}
-
})
-
}, 100);
阅读(5551) | 评论(0) | 转发(0) |
