附加导航

作者: 子却 | 来源:发表于2018-09-26 21:51 被阅读0次

附加导航
项目-附加导航
BootStrap[第十九章:附加导航插件]
Bootstrap Affix导航——附加导航
共享单车APP需要内置导航吗？
前端框架bootstrap-附加导航插件
韵声朗读亭使用说明使用指南
韵声朗读亭使用说明使用指南
附加
VS的包含目录、库目录、引用目录、可执行目录解释

附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。

<body data-spy="scroll" data-target="#myScrollspy">
    <div class="container">
        <div class="row">
            <div class="jumbotron">
                <h1>ASTICK</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><a href="#1">第一部分</a></li>
                        <li><a href="#2">第二部分</a></li>
                        <li><a href="#3">第三部分</a></li>
                    </ul>
                </div>
                <div class="col-xs-9">
                    <div id="1" style="height:900px;border:1px solid lightblue;">
                        <h1 class="text-center">欢迎来到Astick</h1>
                    </div>
                    <div id="2" style="height:900px;border:1px solid lightblue;">
                        <h1 class="text-center">这是一个demo</h1>
                    </div>
                    <div id="3" style="height:900px;border:1px solid lightblue;">
                        <h1 class="text-center">开始练习</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

step1.<body data-spy="scroll" data-target="#myScrollspy"> 为<body>添加监听事件，并将其指定到<div>导航标签；

step2.<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> 用一个无序列表来承载导航标签；

data-spy="affix" 表示启用附加导航插件；

data-offset-top="125" 表示偏移量，也就是滚动条移动后，距离顶部125像素时，导航栏固定显示；

（data-offset-bottom="125" 滚动条移动后，距离底部125像素时，导航栏固定显示；）
step3.<li><a href="#1">第一部分</a></li> 每个<a>链接都得链接到相对应的内容的id；