Scrollspy
Bootstrap’s Scrollspy plugin automatically updates links in a navigation list based on scroll position. This means as you scroll through a page, the corresponding navigation link is highlighted. It’s particularly useful for single-page websites or lengthy landing pages with anchor links to various sections.
Implementing Scrollspy
Setup: Scrollspy works by targeting a navigation element and a content area with corresponding IDs or anchor links.
Example 1: Basic Scrollspy with a Navigation Bar
<body data-spy=”scroll” data-target=”#navbar-example”>
<nav id=”navbar-example” class=”navbar navbar-light bg-light”>
<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>
<!– More nav items –>
</ul>
</nav>
<div>
<h4 id=”section1″>Section 1</h4>
<p>…</p>
<h4 id=”section2″>Section 2</h4>
<p>…</p>
<!– More sections –>
</div>
</body>
Explanation:
– The `body` tag has `data-spy=”scroll”` and `data-target=”#navbar-example”`. This tells Scrollspy to monitor scrolling within the body and update the `.nav` links in the `#navbar-example` navbar.
– Each link in the navbar corresponds to an ID on the page (`#section1`, `#section2`, etc.). As you scroll, the link that corresponds to the section in the viewport becomes active (highlighted).
Example 2: Scrollspy with a Sidebar
<div class=”row”>
<nav id=”sidebar-example” class=”col-3″>
<ul class=”nav nav-pills flex-column”>
<li class=”nav-item”><a class=”nav-link” href=”#item1″>Item 1</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#item2″>Item 2</a></li>
<!– More items –>
</ul>
</nav>
<div class=”col-9″ data-spy=”scroll” data-target=”#sidebar-example” data-offset=”0″>
<h4 id=”item1″>Item 1</h4>
<p>…</p>
<h4 id=”item2″>Item 2</h4>
<p>…</p>
<!– More content –>
</div>
</div>
Explanation:
– In this example, Scrollspy is applied to a column (`div.col-9`) instead of the entire body. This allows for a sidebar-style navigation.
– The `data-offset` attribute can be used to adjust when the link becomes active based on the scroll position. It’s particularly useful if you have fixed elements at the top of the page.
Customizing Scrollspy Behavior
Adjusting Offset and Smooth Scrolling
JavaScript for Smooth Scrolling:
javascript
// jQuery for smooth scrolling
$(‘nav ul li a’).on(‘click’, function(e) {
if (this.hash !== “”) {
e.preventDefault();
var hash = this.hash;
$(‘html, body’).animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
Explanation:
– This JavaScript snippet, used in conjunction with Scrollspy, enables smooth scrolling to the section when a navigation link is clicked.
– The animation speed and easing can be adjusted to suit the design needs.
YouTube Reference :
Bootstrap ScrollSpy is a navigation feature that highlights menu items as the user scrolls through a sectioned page, helping users identify their current location on a long page.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Ensure you use Bootstrap’s responsive classes and combine them with a properly structured HTML layout to adapt the ScrollSpy to different screen sizes.
Yes, we offer Bootstrap Scrollspy tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include:
- Single-page website navigation.
- Section-based content highlighting.
- Dynamic updates for table of contents.
Yes, by using Bootstrap’s JavaScript ScrollSpy plugin and adding data-target and data-spy attributes to your elements, you can create dynamic behavior.
Yes, this page provides a beginner-friendly step-by-step guide to implementing Bootstrap ScrollSpy easily and efficiently.
ScrollSpy dynamically tracks the position of the page content relative to the viewport and highlights the corresponding navigation link in a menu.
Yes, you can customize it with custom CSS for highlighting and JavaScript for advanced behaviors such as animations or delays.
