Scrollspy
LeptonX uses
Bootstrap ScrollSpy's
component's latest version.
Automatically update Bootstrap navigation or list group components based on scroll position to
indicate which link is currently active in the viewport.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
Preview
First heading
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. 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 heading
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. 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 heading
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. 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 heading
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. 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.
Fifth heading
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. 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.
HTML
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>Dropdown</a
>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div
data-bs-spy="scroll"
data-bs-target="#navbar-example2"
data-bs-offset="0"
class="lpx-demo-scrollspy"
tabindex="0"
>
<h4 id="scrollspyHeading1">First heading</h4>
<p>
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. 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>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>
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. 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>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>
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. 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>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>
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. 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>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>
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. 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>
Example with nested nav
Scrollspy also works with nested .navs. If a nested .nav is
.active, its parents will also be .active. Scroll the area next to the
navbar and watch the active class change.
Preview
Item 1
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. 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.
Item 1-1
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. 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.
Item 1-2
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. 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.
Item 2
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. 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.
Item 3
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. 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.
Item 3-1
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. 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.
Item 3-2
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. 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.
HTML
<div class="row">
<div class="col-4">
<nav
id="navbar-example3"
class="navbar navbar-light bg-light flex-column align-items-stretch p-3"
>
<a class="navbar-brand text-dark" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div
data-bs-spy="scroll"
data-bs-target="#navbar-example3"
data-bs-offset="0"
tabindex="0"
class="lpx-demo-scrollspy"
style="height: 350px"
>
<h4 id="item-1">Item 1</h4>
<p>
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. 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>
<h5 id="item-1-1">Item 1-1</h5>
<p>
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. 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>
<h5 id="item-1-2">Item 1-2</h5>
<p>
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. 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>
<h4 id="item-2">Item 2</h4>
<p>
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. 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>
<h4 id="item-3">Item 3</h4>
<p>
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. 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>
<h5 id="item-3-1">Item 3-1</h5>
<p>
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. 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>
<h5 id="item-3-2">Item 3-2</h5>
<p>
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. 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>
</div>
Example with list-group
Scrollspy also works with .list-groups. Scroll the area next to the list group and
watch the active class change.
Preview
Item 1
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. 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.
Item 2
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. 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.
Item 3
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. 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.
Item 4
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. 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.
HTML
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1"
>Item 1</a
>
<a class="list-group-item list-group-item-action" href="#list-item-2"
>Item 2</a
>
<a class="list-group-item list-group-item-action" href="#list-item-3"
>Item 3</a
>
<a class="list-group-item list-group-item-action" href="#list-item-4"
>Item 4</a
>
</div>
</div>
<div class="col-8">
<div
data-bs-spy="scroll"
data-bs-target="#list-example"
data-bs-offset="0"
class="lpx-demo-scrollspy"
tabindex="0"
>
<h4 id="list-item-1">Item 1</h4>
<p>
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. 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>
<h4 id="list-item-2">Item 2</h4>
<p>
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. 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>
<h4 id="list-item-3">Item 3</h4>
<p>
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. 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>
<h4 id="list-item-4">Item 4</h4>
<p>
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. 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>
</div>
Smooth scroll
You can add smooth-scroll to scrollspy for a smooth transition.
Preview
Item 1
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. 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.
Item 2
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. 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.
Item 3
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. 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.
Item 4
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. 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.
HTML
<div class="row">
<div class="col-4">
<div id="smooth-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1"
>Item 1</a
>
<a class="list-group-item list-group-item-action" href="#list-item-2"
>Item 2</a
>
<a class="list-group-item list-group-item-action" href="#list-item-3"
>Item 3</a
>
<a class="list-group-item list-group-item-action" href="#list-item-4"
>Item 4</a
>
</div>
</div>
<div class="col-8">
<div
data-bs-spy="scroll"
data-bs-target="#smooth-example"
data-bs-offset="0"
data-bs-smooth-scroll="true"
class="lpx-demo-scrollspy"
tabindex="0"
>
<h4 id="list-item-1">Item 1</h4>
<p>
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. 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>
<h4 id="list-item-2">Item 2</h4>
<p>
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. 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>
<h4 id="list-item-3">Item 3</h4>
<p>
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. 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>
<h4 id="list-item-4">Item 4</h4>
<p>
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. 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>
</div>
