固定定位--声明式触发固定定位，玩转Bootstrap（JS插件篇）教程-慕课网

来帮同学解答一个问题

+30经验 +1积分 换个问题去回答

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

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>

我们来看一个简单的示例：

<nav class="navbar navbar-default" role="navigation">
    …
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-3" id="sidebarMenu">
            <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20">
                     …
            </ul>
        </div>
        <div class="col-md-9">
                …
        </div>
    </div>
</div>

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

<body data-spy="scroll" data-target="sidebarMenu">

运行效果如下：

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

任务

我来试试：为右侧的导航条菜单添加代码，以实现固定作用。具体要求设置 data-offset-top 为 125px。

<ul class="nav nav-tabs nav-stacked">
    <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>

?不会了怎么办: <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>
                ......
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">第一部分</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
           ......
            <h2 id="section-2">第二部分</h2>
            ......
        </div>
    </div>
</div>

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

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