来自：慕课网

http://www.imooc.com/code/5396

Affix 效果常见的有以下三种：

☑ 顶部固定

☑ 侧边栏固定

☑ 底部固定

固定定位--声明式触发固定定位

Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：

1、data-spy：取值 affix，表示元素固定不变的。

2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。

  • data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
  • data-offset-bottom 刚好与 data-offset-top 相反。

具体使用如下：

<div data-spy="affix" data-offset="90">affix元素</div>

分开设置 data-offset 值方式：

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>

注意，在 body 要声明滚动监控。

<body data-spy="scroll" data-target="sidebarMenu">
注意，请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Bootstrap 附加导航（Affix）插件</title>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <!--<style type="text/css">

            /* 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">第一部分</h2>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <hr>

                    <h2 id="section-2">第二部分</h2>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <hr>

                    <h2 id="section-3">第三部分</h2>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <hr>

                    <h2 id="section-4">第四部分</h2>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <hr>

                    <h2 id="section-5">第五部分</h2>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                    <p>a</p>

                </div>

            </div>

        </div>

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

Bootstrap 固定定位（Affix）的更多相关文章

  1. bootstrap 固定定位

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Boo ...

  2. Bootstrap_Javascript_固定定位

    Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data- ...

  3. Bootstrap中的Affix插件

    我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. ...

  4. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  5. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  6. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  9. input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

随机推荐

  1. java&Protocol Buffers

    ps: Protocol Buffers简称PB PB 安装配置 下载 PB: 在 PB 官网,下载最新版(或者其他版本)PB,这里为了与 Java 项目中的 PB Maven 依赖版本一致,使用 P ...

  2. css 让内容满屏居中不变形

    .selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...

  3. jQuery方法注意事项

    1.关于选择器中含有特殊符号 选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有 ...

  4. 虚拟机CentOS-mini安装完成后的网络设置

    系统环境:虚拟机, CentOS-mini,x86-64, 1. 主机名设置 涉及的文件: /etc/hostname;  /etc/sysconfig/network 1.1 在/etc/hostn ...

  5. [转载] Spring MVC - 处理器拦截器

    5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器)类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.   ...

  6. git 回滚

    git reset --hard HEAD~10 可以通过上面的命令会退到最初的版本查看源代码, git reset --hard 4aa9a32d1625997ef5b28463ccde78d711 ...

  7. BZOJ4635 : 数论小测验

    第一问: 设$a[i]$表示使用$[1,i]$的数字$n$次形成的数组里有多少个$\gcd=1$. 考虑容斥,则$a[i]=i^n-\sum_{j=2}^i a[\lfloor\frac{i}{j}\ ...

  8. Windows7下安装MongoDB

    1.下载地址:http://www.mongodb.org/downloads(32位还是64位自行选择).我下载的是:mongodb-win32-x86_64-2.4.5.zip 2.解压把mong ...

  9. BZOJ 1059 & 二分图匹配

    题意: 判断一个黑白染色的棋盘能否通过交换行或列使对角线上都是黑色. SOL: 真是有点醉...这种问题要么很神要么很水...第一眼感觉很水但就是不造怎么做...想了10分钟怎么感觉就是判断个数够不够 ...

  10. 关于使用rem单位，calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...