📅 最后修改于: 2023-12-03 14:54:11.430000 🧑 作者: Mango
Scrollspy 是一种 Bootstrap 组件，它帮助用户跟踪浏览页面时滚动到哪个区域。在 Scrollspy 中，当用户滚动页面时，当前区域将突出显示在导航栏中，以帮助用户快速导航和浏览。
要使用 Scrollspy，需要首先在页面上添加一个 nav 元素和 data-spy="scroll" 属性，用于标识要跟踪滚动的区域。然后，在 nav 中添加一个 nav-item 元素和 nav-link 元素，用于定义每个跟踪的区域。
例如：
<body data-spy="scroll" data-target="#navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<a class="navbar-brand" href="#">Scrollspy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<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" class="container-fluid">
<h1>Section 1</h1>
<p>Some text..</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Some text..</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Some text..</p>
</div>
上面的示例中，data-target="#navbar" 表示将要跟踪的元素为 id 为 navbar 的导航栏。每个导航链接中的 href 属性指向希望跟踪的页面区域，即具有相应 id 属性的元素。
在某些情况下，如果页面包含动态加载内容，则需要动态更新 Scrollspy。可以使用 refresh 方法来更新 Scrollspy。
例如：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
以上示例中，将会更新所有带有 data-spy="scroll" 属性的元素的 Scrollspy。
Scrollspy 可以帮助用户更快捷的浏览网页，并使网页更加友好。在实际开发中，可以根据需求进行自定义调整，满足更多的设计要求。