滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。

在这里，需要引入三个文件：bootstrap.min.css      jquery-3.3.1.js      bootstrap.min.js

都可以在bootstrap-4.1-3里面找到。

Html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Scroll</title>

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

 <link href="style.css" rel="stylesheet" type="text/css">

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

 <script src="bootstrap.min.js"></script> <!-- 注意文件引入的顺序！ -->

 </head>

 <body data-spy="scroll" data-target="#fixed-nav" data-offset="0">

 <nav id="fixed-nav" class="navbar fixed-top navbar-inverse"

 role="navigation">

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

 <li class="nav-item active">

 <a class="nav-link" href="#p1">page1</a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#p2">page2</a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#3">page3</a>

 </li>

 </ul>

 </nav>

 <div id="p1"> <!-- 使用id属性来让a标签链接 -->

 <p>

 iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 <p>

 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 <p>

 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 </div>

 <div id="p2">

 <p>

 iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 <p>

 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 <p>

 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。

 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。

 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

 </p>

 </div>

 </body>

 </html>

CSS代码:

body{

position: relative;

} /* 相对定位必须设置，不然会出问题 */

#fixed-nav{

width: 350px;

height: 100px;

background-color:darkgray;

}

#p1{

width: 350px;

height: 600px;

background-color: #ebebeb;

}

#p2{

width: 350px;

margin: 0px 10px;

background-color: #fff;

}

效果图：


---------------------
作者：落花人独立_微雨燕双飞
来源：CSDN
原文：https://blog.csdn.net/qq_41684261/article/details/84106063
版权声明：本文为博主原创文章，转载请附上博文链接！

利用bootstrap制作滚动监听的更多相关文章

  1. bootstrap的滚动监听

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

  2. bootstrap插件-滚动监听

    代码 引入bootstrap.js 和bootstrap.css两个文件 <!DOCTYPE html> <html> <head> <meta charse ...

  3. Bootstrap滚动监听

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

  4. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  5. 滚动监听（bootstrap）

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

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

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

  7. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  8. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  9. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

随机推荐

  1. Flume启动错误之：Bootstrap Servers must be specified

    今天测试项目的时候需要启动Flume,然而在启动时遇到了Bootstrap Servers must be specified错误,错误日志如下: [kfk@bigdata-pro01 flume-- ...

  2. git 基础教程

    git 提交 全部文件 git add .  git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件.注意 -A 选项后面还有一个 ...

  3. Python学习笔记--语音处理初步

    语音处理最基础的部分就是如何对音频文件进行处理. 声音的物理意义:声音是一种纵波,纵波是质点的振动方向与传播方向同轴的波.如敲锣时,锣的振动方向与波的传播方向就是一致的,所以声波是纵波.纵波是波动的一 ...

  4. 从零开始的全栈工程师——JS面向对象（初篇）

    面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术.今天,许多流行的编程语言(如Java,JavaScript,C#,C+ ...

  5. JSP中的Property 'name' not found on type java.lang.String

    如果是在forEach中出现. 那么看下items里是不是没有el表达式,只是个字符串. 今天犯了好几次. 特此记录

  6. 在unbuntu 1204（32位）下安装hadoop2.2.0的一些问题

    虽然在网上可以找到很多这样的step by step的教程,但是我还是遇到了很多问题.趁着一点记忆,将这些问题记录下来.安装过程参考了以下博客: http://www.cnblogs.com/life ...

  7. BarCode条形码生成库

    一.Barcode生成条形码的类库 二.示例 新建mvc空项目,添加Nuget引用 主要代码 // // GET: /Home/ public FileContentResult Index() { ...

  8. Struts2_BBS2009小实战

    Struts2_BBS2009准备:链接: http://pan.baidu.com/s/1nvTZz9R 密码: 875a ext3.0_直接部署运行:链接: http://pan.baidu.co ...

  9. Struts2_带参数的结果集

    页面请求: <a href="user/user?type=1">传参数</a> action: public Integer type; public S ...

  10. 第五章 存储过程&触发器

    1.前言 2.存储过程和触发器->存储过程 ·理解:是一组SQL命令集合,经过预编译存放在系统中:就像java程序里的方法,可以重复的被调用: 在日常的数据库操作中,会有大量的T-SQL批处理. ...