利用Bootstrap 开发工具实现滚动监听

（此文只做学习路上的归纳分享总结用，如有侵权，请联系我删除）

使用滚动监听，比较特殊，要在body中设置scroll，以及触点。

很好理解，因为滚动是多对整个网页，而不是之前常用“container”类

<body data-spy="scroll" data-target="#myNav">

data-spy="affix"，设置附加导航。

nav nav-pills nav-stacked，胶囊式导航，用来设置样式。

通过id进行触电绑定

<div class="col-xs-2">

            <div data-spy="affix" data-offset-top="0" id="myNav">

                <ul class="nav nav-pills nav-stacked">

                    <li>

                        <a href="#ch1">第一章</a>

                    </li>

                    <li>

                        <a href="#ch2">第二章</a>

                    </li>

                    <li>

                        <a href="#ch3">第三章</a>

                    </li>

                    <li>

                        <a href="#ch4">第四章</a>

                    </li>

                </ul>

            </div>

        </div>

总代码：

<!doctype html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <meta http-equiv="X-UA-Compaitible" content="IE=edge">

    <title>Daohang</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <!--[if lt IE 9]>

    <script src="js/html5shiv.min.js"></script>

    <script src="js/respond.min.js"></script>

    <![endif]-->

</head>

<body data-spy="scroll" data-target="#myNav">

<div class="container">

    <h1>鱼C密传</h1>

    <div class="row">

        <div class="col-xs-10">

            <h3 id="ch1">第一章：鱼C新纪元</h3>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <h3 id="ch2">第二章：程序猿的世界</h3>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <h3 id="ch3">第三章：初出茅庐的神兽转世</h3>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <h3 id="ch4">第四章：突破第三世界</h3>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.

            </p>

        </div>

        <div class="col-xs-2">

            <div data-spy="affix" data-offset-top="0" id="myNav">

                <ul class="nav nav-pills nav-stacked">

                    <li>

                        <a href="#ch1">第一章</a>

                    </li>

                    <li>

                        <a href="#ch2">第二章</a>

                    </li>

                    <li>

                        <a href="#ch3">第三章</a>

                    </li>

                    <li>

                        <a href="#ch4">第四章</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<script src="js/jquery-1.11.3.js"></script>

<script src="js/bootstrap.js"></script>

</body>

</html>

2020-2-27今日总结——滚动监听&导航的更多相关文章

  1. jq滚动监听-导航滚动

    github地址:https://github.com/yutaogege/jquery.nav.js 代码: <!DOCTYPE html> <html> <head& ...

  2. 滚动监听（bootstrap）

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  3. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  4. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  5. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  6. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  7. bootstap 滚动监听

    ---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...

  8. Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  9. bootstrap-js(3)滚动监听

    导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...

随机推荐

  1. 研究僧丨Window实用利器分享

    本人CS在读小硕,平时工作环境主要是win10加ubuntu,下面推荐一些我用过且觉得不错的应用. PS:我列举的应用基本被下面的网站收录,大家不妨去里面淘淘看. Windows 绝妙项目 Aweso ...

  2. ancconda创建爬虫项目

    # 安装 conda env list conda create -n <envname> conda activate <envname> conda install scr ...

  3. mysql 自增

    auto_increment 在创建表的时候,可以设置id为自增 # 查看表现在的自增值 show create table blog \G; # 设置自增值的初始值 alter table blog ...

  4. Djaingo 随机生成验证码(PIL)

    基础: https://www.cnblogs.com/wupeiqi/articles/5812291.html 实例: https://www.cnblogs.com/6324TV/p/88112 ...

  5. 【自制操作系统06】终于开始用 C 语言了，第一行内核代码！

    一.整理下到目前为止的流程图 写到这,终于才把一些苦力活都干完了,也终于到了我们的内核代码部分,也终于开始第一次用 c 语言写代码了!为了这个阶段性的胜利,以及更好地进入内核部分,下图贴一张到目前为止 ...

  6. RestTemplate---Spring提供的轻量Http Rest 风格API调用工具

    前言 今天在学习Spring Cloud的过程中无意发现了 RestTemplate 这个Spring 提供的Http Rest风格接口之间调用的模板工具类,感觉比Apache提供的HttpClien ...

  7. MySQL5.6绿色版安装

    1.下载 MySQL绿色版安装需下载好三个文件 (1).MySQL5.6版本离线安装包 (2).Microsoft Visual C++ (3).Microsoft .NET Framework 1. ...

  8. Warshall算法求传递闭包及具体实现

    传递闭包 在数学中,在集合 X 上的二元关系 R 的传递闭包是包含 R 的 X 上的最小的传递关系. 例如,如果 X 是(生或死)人的集合而 R 是关系“为父子”,则 R 的传递闭包是关系“x 是 y ...

  9. java中符号类型和无符号类型的问题分析

    一 参考博文 java中无符号类型的解决方案 二 java中的无符号数和有符号数 在计算机中,可以区分正负的类型,称为有符号类型,无正负的类型,称为无符号类型. 使用二进制中的最高位表示正负 计算机中 ...

  10. Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

    案例 今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下: <li><d ...