Scrollspy
Basic Example #
Scrollspy has a few requirements to function properly:
- It must be used on a Bootstrap nav component or list group .
-
Scrollspy requires
position: relative;on the element you're spying on, usually the<body>. -
Anchors (
<a>) are required and must point to an element with thatid.
When successfully implemented, your nav or list group will update accordingly, moving the
.active
class from one item to the next based on their associated targets.
First
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
<nav id="scrollspy-example" class="nav nav-pills">
<a href="#scrollspy-first" class="nav-link">First</a
><a href="#scrollspy-second" class="nav-link">Second</a
><a href="#scrollspy-third" class="nav-link">Third</a
><a href="#scrollspy-fourth" class="nav-link">Fourth</a>
</nav>
<div
data-bs-spy="scroll"
data-bs-target="#scrollspy-example"
data-bs-offset="0"
class="overflow-auto mt-4 bg-secondary position-relative h-15x"
tabindex="0"
>
<div id="scrollspy-first" class="p-5 pb-0">
<h5>First</h5>
<p class="mb-0">
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more
example copy here to emphasize the scrolling and highlighting.
</p>
</div>
<div id="scrollspy-second" class="p-5 pb-0">
<h5>Second</h5>
<p class="mb-0">
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more
example copy here to emphasize the scrolling and highlighting.
</p>
</div>
<div id="scrollspy-third" class="p-5 pb-0">
<h5>Third</h5>
<p class="mb-0">
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more
example copy here to emphasize the scrolling and highlighting.
</p>
</div>
<div id="scrollspy-fourth" class="p-5">
<h5>Fourth</h5>
<p class="mb-0">
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more
example copy here to emphasize the scrolling and highlighting.
</p>
</div>
</div>