Scrollspy in Bootstrap 5
As the user scrolls through your website, scrollspy component automatically updates the links in the navigation list.
This might particularly be useful for long pages with different sections. For example, your website has header navigation with the following links:
Home, Offers, Price, Contact, About
Your home page contains all this information on a single page.
Users may click on any link to directly navigate to that particular section. Alternatively, as they scroll down and reach to particular section – e.g. Offers to Contact section – in that case, the scrollspy component makes the Contact link active on header navigation.
An example of Scrollspy using Bootstrap 5
In this example, we have a top-right menu that is fixed. As you scroll down, you can see the active content’s link is highlighted.
Have a look at the output below along with the code and it is explained after how it worked:
Online demo and code
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
.cust1{
padding:100px 20px;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid " >
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#comp1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comp2">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comp3">Specials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comp4">Price</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comp5">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comp6">About</a>
</li>
</ul>
</div>
</nav>
<div id="comp1" class="container-fluid bg-secondary text-white cust1" >
<h1>Home</h1>
<p>Content like Carousel goes here</p>
<p>Add more content here</p>
</div>
<div id="comp2" class="container-fluid bg-primary text-white cust1">
<h1>Products</h1>
<p>List of Products</p>
</div>
<div id="comp3" class="container-fluid bg-info text-white cust1" >
<h1>Specials</h1>
<p>Special Products Information Go here</p>
<p>Add some images etc.</p>
</div>
<div id="comp4" class="container-fluid bg-warning cust1" >
<h1>Price</h1>
<p>Price Table / Cards </p>
</div>
<div id="comp5" class="container-fluid bg-danger text-white cust1" >
<h1>Contact</h1>
<p>Contact Form here</p>
</div>
<div id="comp6" class="container-fluid bg-success text-white cust1" >
<h1>About</h1>
<p>About Company/Product/Services</p>
<p>Link1</p>
<p>Link2</p>
</div>
</body>
</html>
How does it work?
- You may use scrollspy component with the nav or list group.
- In the example above and below, notice the <style> section under the <head> tag. There, position: relative; is used, which is required. We used it at <body> level.
- <a> tags are used in both examples, which are also required. They point to an element by id.
The example of using List group
Scrollspy component can also be used with the list group to show which content part the user is on.
In the example below, we have six list items. Scroll down the page and you will see list group items highlight:
Online demo and code
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
position: relative;
}
.list-group{
position: sticky;
top: 15px;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#JAZScrollspy">
<div class="container-lg my-2">
<h2 class="text-success">A Demo of Scrollspy with List Group</h2><br>
<div class="row">
<div class="col-sm-3" id="JAZScrollspy">
<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#section1">C++</a>
<a class="list-group-item list-group-item-action" href="#section2">Python</a>
<a class="list-group-item list-group-item-action" href="#section3">C#</a>
<a class="list-group-item list-group-item-action" href="#section4">Kotlin</a>
<a class="list-group-item list-group-item-action" href="#section5">GoLang</a>
<a class="list-group-item list-group-item-action" href="#section6">Java</a>
</div>
</div>
<div class="col-sm-9">
<div id="section1">
<h2>C++</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
<hr>
<div id="section2">
<h2>Python</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
<hr>
<div id="section3">
<h2>C#</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
<hr>
<div id="section4">
<h2>Kotlin</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
<hr>
<div id="section5">
<h2>GoLang</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
<hr>
<div id="section6">
<h2>Java</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/