滚动监听（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. c语言中的隐式函数声明(转)

    本文转自:http://www.jb51.net/article/78212.htm 在c语言里面开来还是要学习c++的编程习惯,使用函数之前一定要声明.不然,即使编译能通过,运行时也可能会出一些莫名 ...

  2. 几个CSS的黑科技

    这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性. border-radius 很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的: ...

  3. httpd.conf 配置

    # # This is the main Apache server configuration file. It contains the # configuration directives th ...

  4. MVC中的验证码

    下面是一个完整的mvc controller类 public class CodeController : Controller { private const string CODE = " ...

  5. 关于th,td,tr的一些相关标签

    tr表示行,td表示列,th其实也是表示列但是在这个标签中的文字会以粗体出现 <th>为表格标题,属性summar为摘要, <caption>标签为首部说明, <thea ...

  6. IEnumerable<T> 用法

    //以下参考来自 http://www.cnblogs.com/wilber2013/p/4299529.html

  7. 关于form的action路径填写

    一:可以是相对路径: 1.action="<%=request.getContextPath() %>/html/index.html"  <%=request. ...

  8. mysql启动报错，与selinux相关

    mysql启动报错,与selinux相关 如果遇到报错,可能的情况是 selinux 的关系,可以安装 setroubleshoot-server 工具,使用 sealert -a /var/log/ ...

  9. [SVN]TortoiseSVN工具培训4─客户端常用操作命令

    1.权限认证 当进行SVN任何操作时,如果是首次操作,SVN会弹出权限认证. 输入用户名和密码点击确认即可完成认证. 勾选保存用户数据信息,可以避免将来重复输入用户名和密码认证. 2.删除权限认证信息 ...

  10. C#实现屏幕指定区域截屏

    //string Opath = @"C:/Picture";            //if (Opath.Substring(Opath.Length - 1, 1) != @ ...