利用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. 若依框架. 仿ThymeLeaf前端SelectDictLable方法

    在framework项目下新增所需服务

  2. python shutil 文件(夹)的复制、删除、移动、压缩和解压

    高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一个文件中 import shutil shutil.copy ...

  3. 开发者必须要了解的架构技术趋势：Service Mesh

    内容概要 Service Mesh 是干啥的?解决了什么问题? Service Mesh 的特性 Service Mesh 的主流实现有哪些? 1. Service Mesh 是什么? 简单来讲,Se ...

  4. 轻松理解 Kubernetes 的核心概念

    Kubernetes 迅速成为云环境中软件部署和管理的新标准. 与强大的功能相对应的是陡峭的学习曲线. 本文将提供 Kubernetes 的简化视图,从高处观察其中的重要组件,以及他们的关联. 硬件 ...

  5. NABCD项目分析

    Share软件 N(需求):我们设计的这款手机app名为share,旨在打造一款服务于大学生的软件,像qq,微信,微博等,这些社交软件大都服务范围太广,我们就是为了满足当代大学生为了本校学生交流方便, ...

  6. Oracle GoldenGate for BigData-Kafka

    0. Env list:Oracle Linux:6.10Oracle DB 11.2.0.4OGG4Ora:19.1OGG4BD:19.1 1.Install package for OCI ins ...

  7. [bzoj4444] [loj#2007] [洛谷P4155] [Scoi2015] 国旗计划

    Description \(A\) 国正在开展一项伟大的计划--国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这项计划需要多名边防战士以接力的形式共同完成,为此,国土安全局已经挑选了 ...

  8. PlayCanvas PBR材质shader代码分析(pixel shader)

    #version es #define varying in out highp vec4 pc_fragColor; #define gl_FragColor pc_fragColor #defin ...

  9. 用VLC搭建流媒体服务器

    用vlc搭建简单流媒体服务器(UDP和TCP方式) 这段时间用到了流媒体数据传输的TCP和UDP方式,感觉vlc可以做这方面的demo,这里总结下,也方便我以后查阅. 简介 VLC主页:http:// ...

  10. kali linux下的部分命令

    查看发行版本 cat    /etc/issue cat   /etc/*-release 查看内核版本 uname  -a 显示机器的处理器架构 arch uname -m 清屏 clear 命令行 ...