Bootstrap 固定定位（Affix）

时间：2021-09-28 14:06:03
来自：慕课网

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>

相关文章