扫码一下
查看教程更方便
Bootstrap scrollspy 是一种导航机制,它根据滚动位置自动突出显示导航链接,以指示访问者当前在页面上的位置。
如果使用书签链接将访问者引导到包含大量内容的页面的不同部分,scrollspy 将使您的网页更加优雅和易于访问。
Scrollspy 有以下要求才能正常运行:
这是使用列表组的滚动监听示例。 让我们尝试一下,看看它是如何工作的:
<body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-sm-3" id="myScrollspy">
<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#section1">Section One</a>
<a class="list-group-item list-group-item-action" href="#section2">Section Two</a>
<a class="list-group-item list-group-item-action" href="#section3">Section Three</a>
</div>
</div>
<div class="col-sm-9">
<div id="section1">
<h2>Section One</h2>
<p>This is section one content...</p>
</div>
<hr>
<div id="section2">
<h2>Section Two</h2>
<p>This is section two content...</p>
</div>
<hr>
<div id="section3">
<h2>Section Three</h2>
<p>This is section three content...</p>
</div>
</div>
</div>
</div>
</body>
我们可以通过 data 属性轻松地将滚动监视行为添加到导航栏,而无需编写任何 JavaScript 代码。 让我们试试下面的例子,看看它是如何工作的:
<body data-bs-spy="scroll" data-bs-offset="60" data-bs-target="#myNavbar">
<nav id="myNavbar" class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a href="#" class="navbar-brand">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#section1" class="nav-link">Section 1</a>
</li>
<li class="nav-item">
<a href="#section2" class="nav-link">Section 2</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link">Section 3</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Section 4</a>
<div class="dropdown-menu">
<a href="#section4dot1" class="dropdown-item">Section 4.1</a>
<a href="#section4dot2" class="dropdown-item">Section 4.2</a>
<a href="#section4dot3" class="dropdown-item">Section 4.3</a>
</div>
</li>
<li>
<a href="#section5" class="nav-link">Section 5</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div id="section1">
<h2>Section 1</h2>
<p>This is section 1 content...</p>
</div>
<hr>
<div id="section2">
<h2>Section 2</h2>
<p>This is section 2 content...</p>
</div>
<hr>
<div id="section3">
<h2>Section 3</h2>
<p>This is section 3 content...</p>
</div>
<hr>
<h2>Section 4</h2>
<p>This is section 4 content</p>
<div id="section4dot1">
<h3>Section 4.1</h3>
<p>This is section 4.1 content...</p>
</div>
<div id="section4dot2">
<h3>Section 4.2</h3>
<p>This is section 4.2 content...</p>
</div>
<div id="section4dot3">
<h3>Section 4.3</h3>
<p>This is section 4.3 content...</p>
</div>
<hr>
<div id="section5">
<h2>Section 5</h2>
<p>This is section 5 content...</p>
</div>
</div>
</body>
你可能想知道这段代码是关于什么的。 好吧,为了更好的理解,让我们将这个scrollspy示例代码的每一部分都一一梳理一遍。
也可以使用 JavaScript 手动添加 scrollspy — 只需在 JavaScript 代码中使用导航栏的 id 或类选择器调用 scrollspy() Bootstrap 方法即可。
document.addEventListener("DOMContentLoaded", function(){
var myScrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#myNavbar"
})
});