Bootstrap Scroll Spy Plugin

In bootstrap we use the scroll spy plugin to update the links in the navigation bar automatically. This is done on the basis of the position of scroll on the page. The scrollspy is considered as a navigation mechanism which is used to highlight the navigation links according to the position of the scroll bar on the webpage automatically. Scrollspy helps the visitors of webpage to easily access different sections.

The scroll spy plugin can be added into bootstrap individually by including the scrollspy.js files. Scroll Spy plugin can also be added when we use bootstrap.js files.


Usage:

Scroll Spy plugin can be added to navigation bar using two different ways:


By using data attributes:

Scroll spy plugin can be used by using data-spy = “scroll” inside the body element. You also have to use data-target = “#identifier”. Here the ID will be of the parent element of the .nav component.

Consider the following example in which it is demonstrated that how scroll spy can be used:

CODE:

< body data- spy = “scroll” data- target = “.navbar- example” >

< div class = “navbar- example” >

< ul class = “nav nav- tabs” >

</ ul >

</ div >

</ body >

It should be noted here that when the ID of the parent element is added, the element should be in the body tag.


By using JavaScript:

A single line of code of JavaScript can be used to call a scrollspy. This can be done by selecting those elements to spy on. Use the function .scrollspy(). Consider the following statement:

$(‘body’).scrollspy({ target: ‘.navbar-example’ })


Example:

Consider the following example in which scrollspy plugin is used through the data attributes:

CODE:

<!DOCTYPE html>

<html>

<head>

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /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 = “#”>Programming Languages</a>

</div>

<div class = “collapse navbar-collapse bs-js-navbar-scrollspy”>

<ul class = “nav navbar-nav”>

<li><a href = “#Java“>Java</a></li>

<li><a href = “#C++”>C++</a></li>

<li class = “dropdown”>

<a href = “#” id = “navbarDrop1” class = “dropdown-toggle” data-toggle = “dropdown”>

Python

<b class = “caret”></b>

</a>

<ul class = “dropdown-menu” role = “menu” aria-labelledby = “navbarDrop1”>

<li><a href = “#About Python” tabindex = “-1”>About Python</a></li>

<li><a href = “#Modules” tabindex = “-1”>Modules</a></li>

<li class = “divider”></li>

<li><a href = “#DataTypes” tabindex = “-1”>DataTypes</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<div data-spy = “scroll” data-target = “#navbar-example” data-offset = “0”

style = “height:200px; overflow:auto; position: relative;”>

<h4 id = “Java”>Java</h4>

<p>

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</p>

<h4 id = “C++”>C++</h4>

<p>

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc.

</p>

<h4 id = “About Python”>About Python</h4>

<p>

Python is a dynamic programming language which was developed by Guido vanRossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. There are also other versions of python programming language. Python 2 was released in October 2000 and Python 3 was released in December 2008 and is considered more compatible. Python has a simple structure and dynamic typing and hence it is used for application development.

</p>

<h4 id = “Modules”>Modules</h4>

<p>

A module is defined by the user to perform certain tasks and they reduce the length of the actual program. A module breaks the program into small sections.

</p>

<h4 id = “DataTypes”>DataTypes</h4>

<p>

Every variable in Python should have some data type and the data type of the variables is considered as classes in Python and the variables itself is considered as an object. Numbers, tuple, list, dictionary are some of the data types in Python programming language.

</p>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

java

When you scroll down, the corresponding section heading or nav link will be highlighted. Likewise if you select any of the nav links or section headings that are C++, Java or Python, the corresponding paragraph will appear. This is the usage of scrollspy plugin.


Options:

There is an option that can be used to customize the scrollspy. This option can be used through the data attributes or we can also use them by using JavaScript code. Consider the following table in which option for scrollspy is described:

Option Type Default Value Data attribute Description
offset number Default: 10 data- offset This option is used to specify the number of pixels to offset from top when calculation of the position of scroll bar is being done.


Methods:

There is one method of scrollspy which is required or called when we are using JavaScript method to call scrollspy. This method is .scrollspy(‘refresh’). The .refresh method is used to update DOM. If any of the elements of DOM is changed for example if any element is removed or added then we use .refresh method. The following is the syntax of this method:

Syntax:

$(‘[data-spy = “scroll”]’).each(function () {

   var $spy = $(this).scrollspy(‘refresh’)

})


Example:

Consider the following example in which we have demonstrated the use of .scrollspy(‘refresh’) method:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< 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 = “#” > Programming Languages < /a >

</ div >

< div class = “collapse navbar- collapse bs- js- navbar- scrollspy” >

< ul class = “nav navbar- nav” >

< li class = “active” >< a href = “#C++” > C++ </ a ></ li >

<li><a href = “#Java”>Java</ a ></ li >

<li class = “dropdown”>

<a href = “#” id = “navbarDrop1” class = “dropdown- toggle” data- toggle = “dropdown”>

Python

<b class = “caret”></b>

</a>

<ul class = “dropdown-menu” role = “menu” aria-labelledby = “navbarDrop1”>

<li><a href = “#About” tabindex = “-1”>About Python</a></li>

<li><a href = “#Modules” tabindex = “-1”>Python Modules</a></li>

<li class = “divider”></li>

<li><a href = “#DataTypes” tabindex = “-1”>Python Data Types</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<div data-spy = “scroll” data-target = “#myScrollspy” data-offset = “0”

style = “height:200px; overflow:auto; position: relative;”>

<div class = “section”>

<h4 id = “C++”>C++<small><a href = “#” onclick = “removeSection(this);”>

&times; Click to Remove section</a></small>

</h4>

<p>

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc.

</p>

</div>

<div class = “section”>

<h4 id = “Java”>Java<small></small></h4>

<p>

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</p>

</div>

<div class = “section”>

<h4 id = “About”>About Python<small><a href = “#” onclick = “removeSection(this);”>

&times; Click to Remove section</a></small>

</h4>

<p>

Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. There are also other versions of python programming language. Python 2 was released in October 2000 and Python 3 was released in December 2008 and is considered more compatible. Python has a simple structure and dynamic typing and hence it is used for application development.

</p>

</div>

<div class = “section”>

<h4 id = “Modules”>Python Modules</h4>

<p>

A module is defined by the user to perform certain tasks and they reduce the length of the actual program. A module breaks the program into small sections.

</p>

</div>

<div class = “section”>

<h4 id = “DataTypes”>Python Data Types</h4>

<p>

Every variable in Python should have some data type and the data type of the variables is considered as classes in Python and the variables itself is considered as an object. Numbers, tuple, list, dictionary are some of the data types in Python programming language.

</p>

</div>

</div>

<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>

</body>

</html>

The above code will generate the following result:

OUTPUT:

following result

In the above example if you click on “Click to Remove section”, the corresponding section will be removed. This is because we used the method .scrollspy(‘refresh’).


Events:

Consider the following table in which the event that works with scrollspy is described:

Event Description Example/ Basic Syntax
activate.bs.scrollspy This event is occurred whenever any new item is activated by scrollspy. $(‘#myScrollspy’).on(‘activate.bs.scrollspy’, function () {

})

 

Example:

Consider the following example in which the event activate.bs.scrollspy is demonstrated:

CODE:

<!DOCTYPE html>

<html>

<head>

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<html>

<script>

$(document).ready(function(){

removeSection = function(e) {

$(e).parents(“.subject”).remove();

$(‘[data-spy=”scroll”]’).each(function () {

var $spy = $(this).scrollspy(‘refresh’)

});

}

$(“#Navexample”).scrollspy();

$(“#Navexample”).on(‘activate.bs.scrollspy’, function () {

var currentSection = $(“.nav li.active > a”).text();

$(“#spyevent”).html(“Current Section: ” + currentSection);

})

});

</script>

<style>

.scroll-box {

height: 250px;

position: relative;

overflow: auto;

font-size:2em;

}

</style>

<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 = “#”>Programming Languages</a>

</div>

<div class = “collapse navbar-collapse” id = “navbarCollapse”>

<ul class = “nav navbar-nav”>

<li class = “active”><a href = “#C++”>C++</a></li>

<li><a href = “#Java”>Java</a></li>

<li class = “dropdown”><a href = “#” class = “dropdown-toggle”

data-toggle = “dropdown”>Python<b class = “caret”></b></a>

<ul class = “dropdown-menu”>

<li><a href = “#Features”>Features of Python</a></li>

<li><a href = “#Modules”>Python Modules</a></li>

<li><a href = “#DataTypes”>Python Data Types</a></li>

</ul>

</li>

<li><a href = “#C”>C</a></li>

</ul>

</div>

</nav>

<div class = “scroll-box” data-spy = “scroll” data-offset = “0”>

<div class = “language”>

<h3 id = “C++”>C++

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h3>

<p>One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc.</p>

</div>

<hr>

<div class = “language”>

<h3 id = “Java”>Java

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h3>

<p>Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++. </p>

</div>

<hr>

<div class = “language”>

<h3 id = “Python”>Python

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h3>

<p>Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. There are also other versions of python programming language. Python 2 was released in October 2000 and Python 3 was released in December 2008 and is considered more compatible. Python has a simple structure and dynamic typing and hence it is used for application development.  </p>

</div>

<hr>

<div class = “language”>

<h4 id = “Features”>Features of Python

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h4>

<p>Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. Python is interpreted programming language that is the program is interpreted line by line. </p>

</div>

<div class = “language”>

<h4 id = “Modules”>Python Modules

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h4>

<p>A module is defined by the user to perform certain tasks and they reduce the length of the actual program. A module breaks the program into small sections.

</p>

</div>

<div class = “language”>

<h4 id = “DataTypes”>Python Data Types

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h4>

<p>Every variable in Python should have some data type and the data type of the variables is considered as classes in Python and the variables itself is considered as an object. Numbers, tuple, list, dictionary are some of the data types in Python programming language.</p>

</div>

<hr>

<div class = “language”>

<h3 id = “C”>C

<small><a href = “#” onclick = “removeSubject(this);”>Click to Remove Language &times;</a></small>

</h3>

<p>

C is a general purpose programming language which was developed by Dennis Ritchie in 1973 at the bell laboratories. C programming language was developed for the UNIX operating system. The language was formalized by American National Standard Institute in 1988 and is approved by International Standard Organization. C is used to write both application and system programs</p>

</div>

</div>

<hr>

<h4 id = “spyevent” class = “text-info”></h4>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

OUTPUT