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

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

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

Html代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Scroll</title>
  6.  <link href="bootstrap.min.css" rel="stylesheet">
  7.  <link href="style.css" rel="stylesheet" type="text/css">
  8.  <script src="jquery-3.3.1.js"></script>
  9.  <script src="bootstrap.min.js"></script> <!-- 注意文件引入的顺序！ -->
  10.  </head>
  11.  <body data-spy="scroll" data-target="#fixed-nav" data-offset="0">
  12.  <nav id="fixed-nav" class="navbar fixed-top navbar-inverse"
  13.  role="navigation">
  14.  <ul class="nav nav-pills nav-content">
  15.  <li class="nav-item active">
  16.  <a class="nav-link" href="#p1">page1</a>
  17.  </li>
  18.  <li class="nav-item">
  19.  <a class="nav-link" href="#p2">page2</a>
  20.  </li>
  21.  <li class="nav-item">
  22.  <a class="nav-link" href="#3">page3</a>
  23.  </li>
  24.  </ul>
  25.  </nav>
  26.  <div id="p1"> <!-- 使用id属性来让a标签链接 -->
  27.  <p>
  28.  iOS 是一个由苹果公司开发和发布的手机操作系统。
  29.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  30.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  31.  </p>
  32.  <p>
  33.  <br>iOS 是一个由苹果公司开发和发布的手机操作系统。
  34.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  35.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  36.  </p>
  37.  <p>
  38.  <br>iOS 是一个由苹果公司开发和发布的手机操作系统。
  39.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  40.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  41.  </p>
  42.  </div>
  43.  <div id="p2">
  44.  <p>
  45.  iOS 是一个由苹果公司开发和发布的手机操作系统。
  46.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  47.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  48.  </p>
  49.  <p>
  50.  <br>iOS 是一个由苹果公司开发和发布的手机操作系统。
  51.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  52.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  53.  </p>
  54.  <p>
  55.  <br>iOS 是一个由苹果公司开发和发布的手机操作系统。
  56.  <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。
  57.  <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
  58.  </p>
  59.  </div>
  60.  </body>
  61.  </html>

CSS代码:

  1. body{
  2. position: relative;
  3. } /* 相对定位必须设置，不然会出问题 */
  4.  
  5. #fixed-nav{
  6. width: 350px;
  7. height: 100px;
  8. background-color:darkgray;
  9. }
  10. #p1{
  11. width: 350px;
  12. height: 600px;
  13. background-color: #ebebeb;
  14. }
  15. #p2{
  16. width: 350px;
  17. margin: 0px 10px;
  18. background-color: #fff;
  19. }
  20.

效果图：


---------------------
作者：落花人独立_微雨燕双飞
来源：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. windows当代理服务器-CCProx的使用

    参考 https://jingyan.baidu.com/article/0f5fb099ef3a2c6d8234ea75.html 在ubuntu下设置网络代理,选择手动方式

  2. (转)Nmap命令的29个实用范例

    Nmap命令的29个实用范例 原文:http://os.51cto.com/art/201401/428152.htm Nmap即网络映射器对Linux系统/网络管理员来说是一个开源且非常通用的工具. ...

  3. Spring Boot2中Spring Security导致Eureka注册失败

    将Spring Boot升级到2.0,Spring Cloud升级到Finchley.M8时,Eureka注册就报错了 Eureka Server配置: server.port=9011 spring ...

  4. GDI+图形图像处理技术——GDIPlus绘图基础

    GDI+概述 GDI在windows中定义为Graphis Device interface,及图形设备接口,是Windows API(application Programming Interfac ...

  5. C#图表控件ZedGraph使用

    最近从java转到C#下开发PC端的桌面程序,之前也尝试用java GUI写桌面程序,发现java写桌面程序还是诸多不便变,虽然最后也写出来了,但是决心还是另起平台,有了一定的java基础,来学习C# ...

  6. hystrix应用介绍（四）

    前几章已经讲了hystrix的应用场景,以及如何使用,本章我们针对如何进行hystrix参数配置做一些分析 //异步的执行 @HystrixCommand(groupKey = "testK ...

  7. 从零开始的全栈工程师——js篇2.18（js的运动）

    一.元素的 client offset scroll 三个系列 clientWidth / clientHeight / clientTop / clientLeftoffsetWidth / off ...

  8. select标签使用 三目运算符

    <td> <select id="roleName" name="roleName" class="input" styl ...

  9. 零基础逆向工程33_Win32_07_创建线程

    1 什么是线程(Threads)? 什么是多线程? 怎么在windows中观察多线程? 线程可以简单理解为主程序为解决一个问题而选择的其中一条路线. 同理,多线程就是同时选择不同的路线来解决此问题. ...

  10. Java中mouseDragged有效mouseMoved没响应的可能原因

    1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...