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

原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html

Bootstrap 附加导航(Affix)插件

外加导航(Affix)插件允许有 <div>
固定在页面的某个位置。您为得以于打开或关闭以该插件之间进行切换。一个广的例子是交际图标。它们将于某位置上马,但当页面点击某个标记,该
<div> 会锁定于有位置,不见面随着页面其他有共同滚。

图片 1如果您想只要独立引用该插件的效用,那么你需要引用 affix.js。或者,正如 Bootstrap
插件概览 一回中所关联,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

用法

公可透过 data 属性或者通过 JavaScript 来使附加导航(Affix)插件。

  • 通过 data
    属性
    :如需于元素添加附加导航(Affix)行为,只需要往内需监听的素添加 data-spy=”affix” 即可。请用偏移来定义何时切换元素的锁定和活动。

    ### 实例

    下的实例演示了经过 data 属性使用附加导航(Affix)插件的用法:

    实例

    <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Bootstrap 附加导航(Affix)插件</title> <link rel=”stylesheet” href=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&gt; <script src=”http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; <script src=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt; <style>

    /* Custom Styles
    */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px
    solid #ddd; box-shadow: 0
    1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0;
    border-top: 1px
    solid #ddd; }
    ul.nav-tabs li:first-child{ border-top: none; }
    ul.nav-tabs li a{ margin: 0; padding: 8px
    16px; border-radius: 0;
    } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px
    solid #0088cc; }
    ul.nav-tabs li:first-child a{ border-radius: 4px
    4px 0
    0; }
    ul.nav-tabs li:last-child a{ border-radius: 0 0 4px
    4px; } ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ }

    </style> </head> <body data-spy=”scroll” data-target=”#myScrollspy”> <div class=”container”> <div class=”jumbotron”> <h1>Bootstrap Affix</h1> </div> <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> <li><a href=”#section-5″>第五局部</a></li> </ul> </div> <div class=”col-xs-9″> <h2 id=”section-1″>第一组成部分

相关文章