Scrollspy In Bootstrap

In this article we will learn about how to use Scrollspy in our applications.

Sometimes bases on business need while designing the website, management/ client want to include some attractive features from UI point of view which makes website better look and feel.

So here it One of the most important features in Bootstrap4 scrollspy is available which target the navigation bar contents highlight automatically on the time scrolling the area. so here we will cover the following things,

Definition
Create Horizentol Scrollspy
Create Vertical Scrollspy
Summary

Definition

Scrollspy is the concept of automatically scrolling Bootstrap navigation menu or list group of items based on scroll position so that it will use to indicate which link is currently in active state.

There are two type of scrollspy we can apply: (1-Horizentol Scrollspy, 2-Vertical Scrollspy)

For the real implementation Scrollspy uses three attribute,

data-spy
data-target
data-offset

data-spy = "scroll": attribute, This attribute can be used for scrollable area

data-target: which we can use with the ID or class of the element of any Bootstrap .navbar component so that it will use to indicate navbar is connected with scrollable area and this currently slected nav links will be highlighted.

data-offset: attribute this is use to defines number of pixels which calculates the position of scroll from top.

Create Horizentol Scrollspy

In this following example I am creating horizontal scrollspy to show how the nav bar is highlighted at the time of scroll,

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Contact </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Training</a>
<a class="dropdown-item" href="#section42">Development</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Home</h1>
<p>Home Home Home Home Home Home Home Home Home Home Home Home </p>
<p>Home Home Home Home Home Home Home Home Home Home Home Home </p>
<p>Home Home Home Home Home Home Home Home Home Home Home Home </p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>About</h1>
<p>About About About About About About About About About</p>
<p>About About About About About About About About About</p>
<p>About About About About About About About About About</p>
<p>About About About About About About About About About</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Contact</h1>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
<p>Contact Contact Contact</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Training</h1>
<p>HTML, CSS, BootStrap, JavaScript, JQuery C#</p>
<p>HTML, CSS, BootStrap, JavaScript, JQuery C#</p>
<p>HTML, CSS, BootStrap, JavaScript, JQuery C#</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Development</h1>
<p>Software Development</p>
<p>Website Development</p>
<p>Consultant & Placement</p>
<p>Software Development</p>
<p>Website Development</p>
<p>Consultant & Placement</p>
</div>
</body>
</html>

It will show the result as in the following image,

Code Explanation

As above we have seen that mainly three attributes are required for scrollspy. The data-spy="scroll" attribute is used to show the element as the scrollable area. In general this is used for <body element>. But we can use at any tag element. data-target=".navbar": this attribute is used with the value of nav bar element id or the class name of the navigation bar (.navbar).

This is use to make sure that the navbar element is connected with the scrollable area. data-offset="50": This attribute is used to specifies the number of pixels from top when we calculate the position of scroll. This data-offset attribute is useful when you think that the given links which is inside the navbar changes the active state as soon as possible

when go to the scrollable elements area. This attribes Default value is 10 pixels.

Note

The important point is scrollable elements is mandatory to match the Id of the given links inside the navbar's list items (<div id="section1"> matches <a href="#section1">).

Create Vertical Scrollspy

In this following example I am creating Vertical scrollspy to how the highlighted nav bar at the time of scroll,

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 300px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Training</a>
<a class="dropdown-item" href="#section42">Development</a>
<a class="dropdown-item" href="#section43">Placement</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1" class="bg-success">
<h1>Home</h1>
<p>Home!</p>
<p>Home!</p>
</div>
<div id="section2" class="bg-warning">
<h1>About</h1>
<p>About</p>
</div>
<div id="section3" class="bg-secondary">
<h1>Contact Us</h1>
<p>Contact Us</p>
</div>
<div id="section41" class="bg-danger">
<h1>Training</h1>
<p>Training</p>
</div>
<div id="section42" class="bg-info">
<h1>Development</h1>
<p>Development</p>
</div>
<div id="section42" class="bg-primary">
<h1>Placement</h1>
<p>Industry Placement</p>
</div>
</div>
</div>
</div>
</body>
</html>

It will show the result as following image,

Note

As we did scrollspy both horizento and vertical using Via data-* Attributes the same thing we can do that using programming java script. Then for that we need to use very small code,

<script>
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
});
</script>

The above method will work with class. If we want to use Id in java script then use the following code

$(document).ready(function(){
$('body').scrollspy({ target: '#myNavbarId',offset: 50 })
});
</script>

we can do the scrollspy on nested items and on lis-group item

Methods

It have 2 methods which is used based on business need

.scrollspy('refresh')
.scrollspy('dispose')

$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})

Events

This event is used to fires on the time of scroll the element when a new item will be activated using the scrollspy.

$(document).ready(function() {
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function() {
var $spy = $(this).scrollspy("refresh");
});
}
$(".scroll-area").scrollspy({
target: "#myNavbar"
});
$(".scroll-area").on("activate.bs.scrollspy", function() {
var currentItem = $(".nav a.active:last").text();
$("#info").empty().html("Currently you are viewing - " + currentItem);
})
});

Summary

Congratulations on following the steps. Whenever you're using a navigation menu on your application, you can implement a Bootstrap scrollspy, so that when you scroll the page either up or down, the navigation menu gets updated by the scrollspy. I hope you liked this tutorial and please share it with others. Do you have any suggestions or additions? Please mention below in the comment section.

Thanks for taking your valuable time to read the full article.