滚动监听（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. stm32 窗口看门狗学习（一）

    什么是窗口看门狗? 1)独立看门狗                限制喂狗时间在0-x内,x由相关寄存器决定.喂狗的时间不能过晚. 2)窗口看门狗               之所以称为窗口就是因为其 ...

  2. 【转载】CSS3 常用四个动画（旋转、放大、旋转放大、移动）

    http://blog.csdn.net/fungleo/article/details/49848905

  3. 多列转1列 SqlServer 实现oracle10g的 wmsys.wm_concat（）--for xml path('')

    有这么一个表 )) , 'aa') , 'bb') , 'aaa') , 'bbb') , 'ccc') , 'ddd') , 'fff')                               ...

  4. Linux mysql 基础操作

    命令  #查看版本 mysql --version   #进入mysql 命令 mysql -u root -p mysql -u root@localhost  (没有密码的情况)   #创建数据库 ...

  5. JavaSE集合基础总览

    Java集合 Java集合,也称之为容器.基本上你写所有的Java程序,都必须要用到一个包.该API基本都位于java.util工具类包中,是JavaSE中的重中之重.简单可以总结为“1136”,分别 ...

  6. LOJ#137. 最小瓶颈路 加强版(Kruskal重构树 rmq求LCA)

    题意 三倍经验哇咔咔 #137. 最小瓶颈路 加强版 #6021. 「from CommonAnts」寻找 LCR #136. 最小瓶颈路 Sol 首先可以证明,两点之间边权最大值最小的路径一定是在最 ...

  7. MyBatis之会话Session原理

    MyBatis 之会话 Session 执行逻辑 1.SQL 会话工厂构建器类 SqlSessionFactoryBuilder 的 build 方法用于构建 SqlSessionFactory 类的 ...

  8. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

  9. arcgis Flex QueryTask

    <esri:Map id="myMap" creationComplete="useMapServicePermaLink()" load="u ...

  10. win10下各种问题的解决办法

    本来申请这个博客是为了写一些Java学习笔记的,但是鉴于我半年内无数次重装系统的惨痛经历,所以把win10系统的一些问题总结一下. 此账号密码:1994llz. 1.win10取消开机密码: http ...