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

使用 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 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() {
      $("ul.affix").width($(".col-xs-3").width());
   };
</script>
时间: 2024-10-27 15:08:20

Bootstrap 附加导航(Affix)插件 问题与解决方式的相关文章

第二百四十九节,Bootstrap附加导航插件

第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. 基本实例

使用附加导航(affix)实现内容切换

<!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8"> <style> a { text-decoration: none; color: #000; line-height: 2em; } ul { list-style:none; padding: 0 0 0 20px; } .affix

Bootstrap 附加导航(Affix)插件

附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js或压缩版的 bootstrap.min.js. 用法 您可以通过 data 属性或者通过 JavaScript 来使用附加

Bootstrap 附加导航插件

一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. //基本实例. <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron" style="height:150px"> <h1>Bootstrap Affix</h

Bootstrap中的Affix插件

我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. Affix用法: 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. <div data-spy="affix" data-offset-

Bootstrap Affix(附加导航(Affix)插件的用法)

原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

附加导航(Affix)行为

用法 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. <div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div> 通过 JavaScript:您可以通过 JavaScript 手

第 19 章 附加导航插件

学习要点: 1.附加导航插件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 中的附加导航插件. 一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. //基本实例 <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron" style="