Bootstrap4 滚动监听(Scrollspy)
Bootstrap4 滚动监听(Scrollspy)技术文档
简介
Bootstrap4 滚动监听(Scrollspy)是一种动态效果，它能够自动监测窗口滚动位置，并高亮显示用户当前正在浏览的位置。
该效果适用于单页网站或者是有多个内容块的网站，可通过样式和 JavaScript 进行配置和定制。
开始使用
准备工作
在使用 Bootstrap4 滚动监听之前，确保已经正确导入了 Bootstrap 样式库和 JavaScript 库。
同时，需要在主导航条上添加需要滚动的链接，以便滚动监听组件能够正常工作。
基本结构
Bootstrap4 滚动监听的基本结构如下：
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1">
<h1>Section 1</h1>
<p>Content for section 1 goes here.</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Content for section 2 goes here.</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Content for section 3 goes here.</p>
</div>
启用滚动监听
要启用 Bootstrap4 滚动监听，可以使用以下 JavaScript 代码：
$('body').scrollspy({ target: '#navbar' })
其中，target 属性指定把滚动监听应用到哪个元素。
设置偏移
如果网站的主导航条有固定的高度，可以设置滚动偏移量，以确保滚动监听效果的正确性。
$('body').scrollspy({ target: '#navbar', offset: 100 })
其中，offset 属性表示滚动偏移量。
总结
Bootstrap4 滚动监听(Scrollspy)是一款强大的 JavaScript 插件，可以帮助我们在单页网站或者多内容块的网站中实现滚动位置监测和高亮显示。只需一些简单的准备工作和配置，便能轻松使用这款插件，使网站看起来更加动态和吸引人。