关于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类的定位方式也在改变。
相关文章推荐
- bootstrap中使用Affix时,顶部导航栏出现位置偏移的问题
- 关于default的位置问题:default放在前面
- 关于更换百度地图默认位置之后如果出现还是先出现北京然后再是当前的地址的问题解决办法
- win32窗口:关于鼠标定位位置偏移问题的原因及解决方法
- iOS11关于隐藏导航栏后带有scrollView界面出现,下移问题
- 关于将geoserver gwc切片加载到地图上出现偏移的问题
- 关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题
- 关于键盘出现与隐藏时调整UITextField的显示位置问题
- Android移动开发-通过自定义算法代码来纠偏地图由GPS定位到的经纬度在地图上显示或解析位置时出现偏移的问题
- 关于Android长按出现复制粘贴栏在顶部占位问题解决方法
- 关于EditText与ScrollView嵌套使用时候出现的Edittext自动滚动至最顶部的问题
- 关于jsp页面顶部出现空白问题
- HasButton为图片进行左右位置偏移时,在使用HSCROLL消息时,出现中断的问题
- 关于 ios4. 系统的statusbar 隐藏后顶部出现横条问题
- 关于WdatePicker显示位置偏移的问题
- iOS 解决导航栏左右 BarButtonItem偏移位置的问题
- UIScorllView加载子视图出现位置向下偏移64问题
- 关于Android长按出现复制粘贴栏在顶部占位问题解决方法
- 关于default的位置问题:default放在前面
- 关于 ios4. 系统的statusbar 隐藏后顶部出现横条问题