滚动监听（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. 多级菜单 menu

    jquery menu: http://jqueryui.com/menu/ Kendo UI Demos http://demos.telerik.com/kendo-ui/web/menu/ind ...

  2. (转)使用HMC接管通过串口或显卡安装的分区操作系统

    使用HMC接管通过串口或显卡安装的分区操作系统 原文:http://m.blog.itpub.net/23135684/viewspace-1062084/ 这是一个真实的案例,客户有一台P550的服 ...

  3. jemeter排至数据库时报：Access denied for user 'root'@'localhost' (using password:YES) 解决方案

    相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...

  4. JEECMS站群管理系统-- 自定义标签及使用自己创建的表的实现过程

    下面是我自己定义的标签mycontent_list 首先,在数据库里创建了一个jc_mycontent的表,其中有id,title,content三个字段 其次,创建了一个实体类 public cla ...

  5. linux 编译安装php7

    1.下载php7安装包: php7 2.解压 .tar.gzcd php-7.1.5 3.可能需要的扩展 yum install libmcrypt libmcrypt-devel mcrypt mh ...

  6. Ajax实现跨域访问的三种方法

    转载自:http://www.jb51.net/article/68424.htm 一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / scri ...

  7. 实现多ComboBox复杂查询 使用ComboBoxDisplay Value属性

    首先创建一个类 class ComboBoxItem { public string Text { get; set; } public object Value { get; set; } //这个 ...

  8. #include stdio.h(4)

    #include <stdio.h> int main() { //****************1.数组*************** //什么是数组:专门用来存放数据的 /* 格式 ...

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

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

  10. DOM 事件冒泡

    1.什么是事件冒泡? 事件冒泡就是从具体到不具体, 例如:当你给了一个button按钮一个点击事件,再给他的父级相同的事件,就会按照,button,body,document,window,继续向上冒 ...