利用bootstrap制作滚动监听
滚动监听（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制作滚动监听的更多相关文章
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- bootstrap插件-滚动监听
代码 引入bootstrap.js 和bootstrap.css两个文件 <!DOCTYPE html> <html> <head> <meta charse ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- 滚动监听（bootstrap）
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- Bootstrap入门（二十六）JS插件3：滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
随机推荐
- 百度 CDN公共库
http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs 简介 CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直 ...
- oracle 找回被覆盖的存储过程
登录到sys账户下 1.TO_TIMESTAMP('2014-05-04 14:33:00', 'YYYY-MM-DD HH24:MI:SS') 删除前的日期 2.owner 表空调 3.Name ...
- Fastjson中以is打头出现的问题，会生成两个变量
解决办法: @JSONField(name = "isSelf")public boolean isSelf = false; 这样就不会生成两个谜题 self和isSelf了 h ...
- javascript中的this使用场景
刚接触js不久时对this总是感到无比迷茫,以下是来自js设计模式与实践里的总结 this总是指向一个对象,有时指向全局对象,有时指向构造对象,有时指向DOM对象 1. 作为对象的方法调用 做为对象的 ...
- Day5下
T1 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> ...
- 2019.3.26判断是否回文（java实现）
我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...
- collides with another import statement解决办法
如我要导入的两个包名为: import com.tesla.gateway.core.filter.Filter import ch.qos.logbak.core.filter.Filter 这样就 ...
- vue2.0高仿饿了么better-scroll
首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"& ...
- iDempiere 使用指南 采购开票付款流程
Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...
- CODESOFT条码设计软件如何隐藏数据源方法
作为强大的条码标签设计软件,用户在用CODESOFT设计条码标签时,有时需要根据实际情况,将条码数据源隐藏,也就是使设计与打印出来的条形码下不带有数据.那么这要怎么在CODESOFT中实现呢?下面,小 ...