Isn't Web Development engaging? Building new websites and using amazing animations, different APIs, CSS, AJAX, and Bootstrap. Does the feature of highlighting the headings you are currently reading fascinate you? Want to learn how to implement that? We have got you covered.
In this article, we will discuss the Bootstrap scrollspy plugin.
Bootstrap
Bootstrap is an open-source CSS framework making it easy to create attractive web pages with responsiveness.
These CSS and javascript-based design templates for forms, buttons, and typography are contained in bootstrap.
Scrollspy Plugin
The Scrollspy (auto-updating nav) plugin allows you to target specific page portions based on where you are on the page. In the straightforward implementation, add .active classes depending on the scroll position to the navbar. Scrollspy.js is required if you wish to use this plugin's capabilities individually.
Few libraries are required to be added in the body tag of the program. The libraries required to use this plugin are:
To identify which link is active(what is the current section being viewed) in the viewport, change Bootstrap navigation or list group components based on scroll position.
Usage
Scrollspy behaviour can be added to your topbar navigation:
Using data-attributes
Using Javascript
Using Data-attributes
On the element, you want to spy on, add data-spy = "scroll" (in the body tag). Then, for every Bootstrap .nav component, add the attribute value = ID or class of the parent element. You'll need components in the body of the page with matching IDs to the links you're spying on for this to work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrollspy with Data Attribute</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Scrollspy</h3>
<nav id="navbar-example" class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Section</a>
</div>
<div class="collapse navbar-collapse" id="navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#CN1">Coding Ninjas 1</a></li>
<li><a href="#CN2">Coding Ninjas 2</a></li>
<li><a href="#CN3">Coding Ninjas 3</a></li>
<li><a href="#CN4">Coding Ninjas 4</a></li>
<li><a href="#CN5">Coding Ninjas 5</a></li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 310px; overflow: auto; position: relative;">
<h4 id="CN1">Coding Ninjas 1</h4>
<p>
The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers.
</p>
<h4 id="CN2">Coding Ninjas 2</h4>
<p>
At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered.
</p>
<h4 id="CN3">Coding Ninjas 3</h4>
<p>
Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry.
</p>
<h4 id="CN4">Coding Ninjas 4</h4>
<p>
Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more.
</p>
<h4 id="CN5">Coding Ninjas 5</h4>
<p>
Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees.
</p>
</div>
</body>
</html>
Output
Before clicking:
If screen size is reduced it looks like this
After Clicking:
You choose any selection from the section, automatically going to your chosen section.
Using Javascript
You can use JavaScript instead of data attributes to activate the scrollspy by selecting the element to spy on. The function scrollspy() allows you to scroll through a list of items.
The use of the scrollspy plugin via javascript is demonstrated in the following example.
Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrollspy Javascript</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Section</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#CN1">Coding Ninjas 1</a></li>
<li><a href="#CN2">Coding Ninjas 2</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">
Coding Ninjas
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#CN3" tabindex="-1">Coding Ninjas 3</a></li>
<li><a href="#CN4" tabindex="-1">Coding Ninjas 4</a></li>
<li class="divider"></li>
<li><a href="#CN5" tabindex="-1">Coding Ninjas 5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-target="#navbar-example" data-offset="0" style="height: 310px; overflow: auto; position: relative;">
<h4 id="CN1">Coding Ninjas 1</h4>
<p>
The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers.
</p>
<h4 id="CN2">Coding Ninjas 2</h4>
<p>
At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered.
</p>
<h4 id="CN3">Coding Ninjas 3</h4>
<p>
Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry. Coding Ninjas was founded in 2016 to bridge the knowledge gap between colleges and industry.
</p>
<h4 id="CN4">Coding Ninjas 4</h4>
<p>
Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more. Founded by Ankush Singla, Kannu Mittal and Dhawal Parate, Coding Ninjas boasts of world-class teaching faculty and a state-of-art learning platform for Coding education with faculty alumni of IIT, Stanford, IIIT and Facebook. Coding Ninjas teaches 17+ Programming courses in Foundation,l Advanced, Data & Development courses such as Machine Learning, Data Science, Web Development, Android and more.
</p>
<h4 id="CN5">Coding Ninjas 5</h4>
<p>
Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees. Today, Coding Ninjas ecosystem comprises of 40,000+ students and alumni, 1000+ Campus Ambassadors, 2000+ Teaching Assistants, and 150+ employees.
</p>
<p>
Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers. Transforming tech education for the next generation of developers.
</p>
</div>
</body>
</html>
Output
Before clicking:
After clicking:
Clicking on the dropdown, we can see the other sections from which we can choose.
The selected section will open up.
Options
Data attributes or JavaScript can be used to pass options. Append the option name to data- for data attributes, as in data-offset="". The possibilities are listed in the table below.
Name
Type
Default
Description
offset
number
10
When computing the position of the scroll, pixels offset from the top.
Methods
There are a few methods of scrollspy like
scrollspy(‘refresh’)
scrollspy(‘dispose’) - The scrollspy of an element is destroyed.
Suppose you're using scrollspy to add or remove elements from the DOM. In that case, you'll need to call the refresh method.
Syntax
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
Program
The .scrollspy('refresh') method is demonstrated in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrollspy Methods</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
removeSection = function (e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy("refresh");
});
};
$("#myScrollspy").scrollspy();
});
</script>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Scrollspy Methods</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#CN1">Coding Ninjas 1</a></li>
<li><a href="#CN2">Coding Ninjas 2</a></li>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height: 310px; overflow: auto; position: relative;">
<div class="section">
<h4 id="CN1">
Coding Ninjas 1<small><a href="#" onclick="removeSection(this);"> × Remove this section</a></small>
</h4>
<p>
The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers.
</p>
</div>
<div class="section">
<h4 id="CN2">Coding Ninjas 2<small></small></h4>
<p>
At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered.
</p>
</div>
</div>
</body>
</html>
Output
Before removing:
After removing:
We will try removing the 1st section.
Events
The events to work with scrollspy are shown in the table below. To hook into the function, utilize this event.
Event Type
Description
activate.bs.scrollspy
When the scrollspy activates a new item, this event triggers on the scroll element.
Syntax
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// write here...
})
Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrollspy Events</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#Navexample").scrollspy();
// When a scrollspy item is activated, the event is triggered.
$("#Navexample").on("activate.bs.scrollspy", function () {
var currentSection = $(".nav li.active > a").text();
$("#spyevent").html("Current Item being viewed >> " + currentSection);
});
});
</script>
<style>
.scroll-box {
height: 310px;
position: relative;
overflow: auto;
font-size: 10px;
}
</style>
</head>
<body>
<div class="container">
<nav id="Navexample" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Scrollspy Events</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#CN1">Coding Ninjas 1</a></li>
<li><a href="#CN2">Coding Ninjas 2</a></li>
</ul>
</div>
</nav>
<div class="scroll-box" data-spy="scroll" data-offset="0">
<div class="loremipsumnew">
<h3 id="CN1">Coding Ninjas 1</h3>
<p>
The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers. The platform for the next billion students. Transforming tech education for the next generation of developers.
</p>
</div>
<hr />
<div class="loremipsumnew">
<h3 id="CN2">Coding Ninjas 2</h3>
<p>
At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered. At Coding Ninjas, our mission is to continuously innovate the best ways to train the next generation of developers and to transform the the way tech education is delivered.
</p>
</div>
</div>
<hr />
<h4 id="spyevent" class="text-info"></h4>
</div>
</body>
</html>
Output
Before clicking:
After clicking:
Click the section of your choice
Frequently Asked Questions
How can we use Bootstrap in our program?
The links provided on Bootstrap's official website can be included in your file in the header, and after that, add classes to respective elements for interacting with the results.
Is Bootstrap a framework or a library?
Bootstrap is a CSS framework for creating responsive and mobile websites.
What is a Scrollspy?
Scrollspy is a bootstrap plugin that helps understand the user's current viewing or scroll position. When scrolling the area, Bootstrap scrollspy automatically targets the navigation bar contents.
What are a few attributes used in Scrollspy?
The attributes used in Scrollspy are data-spy, data-target, and data-offset.
Are there other classes present in bootstrap?
Yes, there are a lot of classes inside the bootstrap library. Some classes are "btn" for the button, "m" for the margin, p for padding, border-primary for border colour, etc.
Conclusion
In this article, we have discussed the scrollspy plugin. According to the visitor's scroll position, the Bootstrap scrollspy navigation system helps them take to where they want to be on the page. If you're utilizing bookmark links to send users to different portions of a website with a lot of material, the scrollspy will make your web page more elegant and accessible. To learn more about Bootstrap, read:
305+ registered