滚动监听（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++)

    贪心是一种算法范例,它一点一点地构建解决方案,总是选择下一个提供最明显和最直接好处的部分.因此,选择局部最优也会导致全局解的问题最适合贪心问题. 例如,考虑分数背包问题.局部最优策略是选择权重比最大的 ...

  2. poj1092. To Buy or Not to Buy (20)

    1092. To Buy or Not to Buy (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...

  3. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  4. logback.xml日志文件过滤器配置简析

    自定义过滤器 java代码,目的是在mdc中放值,然后在日志中打印 package com.controller; import com.pojo.JsonData; import org.slf4j ...

  5. FastDFS 注意事项

    1.nginx集成FastDFS模块时,配置文件问题 检测到nginx日志:  /home/soft/fastdfs-nginx-module/src/common.c, line: 155, loa ...

  6. 在UITableView中识别左右滑动，实现上下翻页的功能

    目前有三种方案: 1. UIScrollView + UITableView. 实现方法,在UIScrollView中,加入UITableView即可 设置UIScrollView的代理和方法 - ( ...

  7. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  8. 如何使用Nunit进行测试

    如何使用Nunit进行测试(Visual Studio 2017 comminity) 原文:如何使用Nunit进行测试(Visual Studio 2017 comminity) 一.环境 操作系统 ...

  9. Static 用法

    1.Static关键字含意:static译文是静态的,静止的,因此使用 static 修饰符声明属于类型本身而不是属于特定对象(new创建的对象)的静态成员. 2.修饰使用范围 static 修饰符可 ...

  10. SPFieldLookupValue

    //得到查阅项的值SPWeb web = site.OpenWeb();SPList list = web.Lists["DemoList"];SPListItem item = ...