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);
阅读(5525) | 评论(0) | 转发(0) |