Core Code
Core Code Modern Dev Handbook

Scrollspy Offset

Adjust scroll offset for sticky navigation bars.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body data-bs-spy="scroll"
data-bs-target="#offsetNav"
data-bs-offset="100"
tabindex="0">

<nav id="offsetNav" class="navbar bg-light sticky-top">

<a class="nav-link" href="#one">One</a>
<a class="nav-link" href="#two">Two</a>

</nav>

<div class="container py-5">

<h4 id="one">Section One</h4>
<p style="height:400px"></p>

<h4 id="two">Section Two</h4>
<p style="height:400px"></p>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Scrollspy Examples (7)

example Basic Scrollspy open example example Sidebar Scrollspy open example example Navbar Scrollspy open example example Nested Scrollspy open example example Scrollspy with Nav Pills open example example Documentation Layout open example example Scrollspy with Smooth Layout open example