当先锋百科网

首页 1 2 3 4 5 6 7

Bootstrap 固定定位（Affix） 

来自：慕课网
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>
View Code

 

转载于:https://www.cnblogs.com/XDJjy/p/4693743.html