文档章节

Bootstrap 附加导航(Affix)插件 问题与解决方式

蜉先生
 蜉先生
发布于 2015/07/12 11:04
字数 400
阅读 391
收藏 4

使用 Bootstrap 附加导航(Affix)插件 出现各种问题:记录下解决问题的方式,供大家使用参考,言有不当,欢迎拍砖。

★  Link点击后的位置偏移 

    点击侧导航条时,页面上指定的Link会滚动过高,被顶导航条遮住。这个貌似不是Affix的问题,而是顶导航条固定位置的原因。也可以定义到外层div中,这个自己发挥

Css代码 

/* Janky fix for preventing navbar from overlapping */  
h1[id] {  
  padding-top: 80px;  
  margin-top: -45px;  
}


 原理是比如想要35px的间隙,不能直接写35px。需要 top padding设置成80px,防止顶导航条遮挡。

 然后再设置 top margin 为 -45px,以达到35px的效果。

 

 ★  滚动页面时尺寸会改变 
  还有个问题就是滚动页面,当侧边导航条浮起时会改变尺寸。 

  我的解决方式 是 使用 js 来动态更改 它 的 宽度

Html代码      附加导航的代码结构 

<div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul id="affix-ui" class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">内容部分</div>
</div>

JavaScript代码 

<script>
//初始化
   $(function(){
      updateLogin(); //载入数据
   });
//页面改变事件
   window.onresize = function(){  
                updateLogin();
            }
//更新数据            
   function updateLogin() {
       $("#affix-ui").width($(".col-xs-3").width());
   };
</script>




© 著作权归作者所有

蜉先生
粉丝 8
博文 19
码字总数 26222
作品 0
朝阳
程序员
私信 提问
bootstrap附加导航affix时会抖动

bootstrap运用affix附加导航滚动监听,在有一部分移动设备上滚动的时候导航条会不停的抖动。

Conquer0101
2014/12/11
296
0
bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有

bootstrap写了一个affix的附加导航(导航条在左边,数据在右边,分成的两列),在安卓手机的微信内置浏览器上滚动监听是正常的,但是在iPhone微信的内置浏览器上有时可以监听有时不能监听,这是...

Conquer0101
2014/12/02
874
1
Bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中,...

9秒教育
2015/11/28
128
0
Bootstrap中nav在container中用affix时,nav宽度撑不满容器的解决方案

这是我的Bootstrap页面头,我要做的是,当滚动页面到网页标题栏之后,把导航栏固定在页面顶端,适用了Bootstrap的Affix组件; 这是我的css片段,我的网页标题高度为80px,当导航栏滚动了80p...

Big_BoBo
2015/03/30
287
0
bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中,...

9秒学院
2015/12/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
12
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
8
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部