Scrollspy is a feature that automatically updates navigation links when scrolling through a page. It is commonly used with a navbar or sidebar menu to show the active section.
Before using Scrollspy, ensure Bootstrap’s CSS and JavaScript are included.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle with JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
✅ Explanation:
Bootstrap’s JavaScript is required for Scrollspy to function.
The navigation menu must have data attributes to enable Scrollspy.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
<ul class="nav nav-pills">
<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>
</nav>
<div class="container mt-5">
<h4 id="section1">Section 1</h4>
<p>Content for Section 1...</p>
<h4 id="section2">Section 2</h4>
<p>Content for Section 2...</p>
<h4 id="section3">Section 3</h4>
<p>Content for Section 3...</p>
</div>
</body>
✅ Explanation:
data-bs-spy="scroll" → Enables Scrollspy.
data-bs-target="#navbar-example" → Connects the navigation to Scrollspy.
The fixed-top navbar stays at the top while scrolling.
Sections have unique IDs (#section1, #section2, etc.) to link with the menu.
You can also use Scrollspy with a sticky sidebar for better navigation.
<body data-bs-spy="scroll" data-bs-target="#sidebar-menu">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar-menu" class="col-md-3 position-sticky top-0">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#part1">Part 1</a></li>
<li class="nav-item"><a class="nav-link" href="#part2">Part 2</a></li>
</ul>
</nav>
<!-- Main Content -->
<div class="col-md-9">
<h3 id="part1">Part 1</h3>
<p>Details for Part 1...</p>
<h3 id="part2">Part 2</h3>
<p>Details for Part 2...</p>
</div>
</div>
</body>
✅ Explanation:
position-sticky top-0 → Keeps the sidebar fixed while scrolling.
Scrollspy highlights active links as users scroll down.
Sticky elements remain visible within the viewport as users scroll. They are useful for headers, sidebars, and floating buttons.
.sticky-top Class<nav class="navbar navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Sticky Navbar</a>
</nav>
✅ Explanation:
sticky-top keeps the navbar fixed at the top when scrolling.
<nav class="navbar navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Sticky Navbar</a>
</nav>
✅ Explanation:
sticky-top ensures the sidebar remains fixed when scrolling.
<footer class="bg-dark text-white text-center sticky-bottom p-3">
Sticky Footer - Always Visible!
</footer>
✅ Explanation:
sticky-bottom ensures the footer is always at the bottom.
To enable smooth scrolling, use CSS or JavaScript.
html {
scroll-behavior: smooth;
}
✅ Explanation:
This makes Scrollspy navigation transitions smooth.
🚀 Bootstrap’s Scrollspy & Sticky Elements improve website navigation and user experience!
✅ Scrollspy: Automatically updates navigation links based on scroll position.
✅ Sticky Elements: Keeps elements like navbar, sidebar, and footer fixed on the page.
By using Bootstrap classes, you can implement responsive and user-friendly layouts without writing extra CSS or JavaScript! 🎯