BS5 Scrollspy
In Bootstrap 5, the Scrollspy component is used to automatically update navigation links based on the scroll position of the page. It allows you to create a navigation menu that highlights the active section as the user scrolls through the content. Here's an example of how to use Scrollspy in Bootstrap 5:
html
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<ul class="navbar-nav">
<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>
</div>
</nav>
<div id="section1" class="section">Section 1 Content</div>
<div id="section2" class="section">Section 2 Content</div>
<div id="section3" class="section">Section 3 Content</div>
<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar'
})
</script>
</body>In this example, we have a `body` element with the `data-bs-spy="scroll"` attribute to enable Scrollspy on the page. The `data-bs-target` attribute is set to the ID of the navigation element (`#navbar`) to specify the target for Scrollspy. The `data-bs-offset` attribute defines the offset value (in pixels) that determines when to activate a navigation link. In this case, the offset is set to 50 pixels from the top of the page.
The navigation menu is defined within the `nav` element (`#navbar`). Each menu item is represented by a `li` element with the class `nav-item`, and the actual links are created using the `a` element with the class `nav-link`. The `href` attributes of the links correspond to the IDs of the sections to which they should scroll when clicked.
The content sections are marked with `div` elements and assigned unique IDs (`section1`, `section2`, `section3`). These IDs are referenced in the navigation links' `href` attributes.
To initialize Scrollspy, JavaScript is used. The `script` section at the bottom of the code creates a new `ScrollSpy` object with `document.body` as the target element and `#navbar` as the navigation target. The `ScrollSpy` object is then assigned to the `scrollSpy` variable.
Make sure to include the Bootstrap JavaScript file (`bootstrap.js` or `bootstrap.min.js`) in your HTML document for Scrollspy to work properly.
As the user scrolls through the page, Scrollspy will update the active navigation link based on the current scroll position. The active link will have the class `active`, indicating the corresponding section that is currently in view.
You can customize the Scrollspy behavior, such as the scroll offset and other options, by passing different parameters to the `ScrollSpy` constructor. Refer to the Bootstrap documentation for more details and examples on working with Scrollspy in Bootstrap 5.
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.