利用Bootstrap实现滚动监听

最新推荐文章于 2022-12-16 07:00:00 发布

原创最新推荐文章于 2022-12-16 07:00:00 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

Web网页专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用Bootstrap的Scrollspy插件，该插件能根据页面滚动条位置自动更新导航菜单，详细讲解了需要引入的文件（bootstrap.min.css, jquery-3.3.1.js, bootstrap.min.js）及相应的HTML和CSS代码实现方法。" 14169165,1306866,Python IMAP模块解析163邮箱并下载邮件,"['Python编程', '电子邮件处理', 'imaplib库', '邮件解码']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动监听（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;
		}

效果图：