-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
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 :
