您的位置:首页 > Web前端 > BootStrap

关于bootstrap中Affix放在顶部导航栏,出现位置偏移的问题

2017-01-11 21:04 633 查看

1.在使用bootstarp开发我们公司产品产品网站的时候使用Affix插件的,影响了顶部导航栏的位置。

2.改正好之后的截图如下:



这是修改之后的效果,之前导航条的位置出现在左边。
3.具体原因

ffix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域。一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法。首先来看看他的实现原理。它是通过实时修改页面元素的class属性来实现的

开始的时候应用affix的元素的class中会自动添加affxi-top属性

当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class中会将affix-top变为affix

当拖动滚动条到页面底部的时候,affix又会自动变为affix-bottom

我的解决方法是,在自己的css中重写了

.affix{
position:static;

},将它的定位方式固定为默认。

因为在滚动的时候,affix类的定位方式也在改变。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐