We have visited many websites where the navigation bars are automatically updated as the user scrolls down the webpage. Scrollspy works according to the scroll position or the position at which the user is currently seeing. Bootstrap scrollspy targets the navigation bar contents automatically on scrolling the area. In this article, we will see how to implement scrollspy in Bootstrap. We will implement the scrollspy in 2 ways:
- Horizontal scrollspy
- Vertical scrollspy
We need to import the Bootstrap CDN libraries to use the scrollspy functionality. We will include the libraries from the official Bootstrap website. There are a few requirements in order to scrollspy works properly:
- Bootstrap nav component or list group is necessary to include.
- Require position : relative: on the element for which spying is applied, generally in the body tag.
- <a> tag is required that must point to an element with that id.
Implementing horizontal scrollspy: We will create a navbar using a nav tag in our body. The navbar will contain three items. We will use the container class having the heading and some dummy text, which will provide some top padding to ensure that the navbar and container don’t overlap with each other. The navbar should be fixed at the top in order for it to scrollspy to work properly.
Some attributes are added with the elements for the implementation of this feature to the body tag.
<body style="position:relative" data-spy="scroll"
data-target=".navbar" data-offset="50"Attributes values:
- data-spy: It is used to spy the current position in which the user is scrolling.
- data-target: This attribute is used to connect the navigation bar with the scrollable area.
- data-offset: This attribute specifies the number of pixels to offset from the top when calculating the position of the scroll.
Example: In this example, we will see the use of Bootstrap scrollspy.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.container {
height: 500px;
padding-top: 50px;
}
#java {
background: lightblue;
}
#cpp {
background: lightgreen;
}
#dsa {
background: #ffcc66;
}
</style>
</head>
<body style="position: relative" data-spy="scroll"
data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-lg
navbar-inverse navbar-fixed-top">
<a href="#" class="navbar-brand">
GeeksforGeeks
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link"
href="#java">Java</a></li>
<li class="nav-item"><a class="nav-link"
href="#cpp">C++</a></li>
<li class="nav-item"><a class="nav-link"
href="#dsa">DSA</a></li>
</ul>
</nav>
<div id="java" class="container container-fluid">
<h4>Java</h4>
<p>
Java is a OOP programming language and
GeeksforGeeks has great articles
on it.
</p>
</div>
<div id="cpp" class="container container-fluid">
<h4>C++</h4>
<p>
C++ is a very popular programming language
used by many developers and
programmers around the world. It has
wide range of applications from
software to backend. I have learned
C++ mostly from GeeksforGeeks
because of the great content.
</p>
</div>
<div id="dsa" class="container container-fluid">
<h4>DSA</h4>
<p>
DSA or Data Structures and Algorithms are
the most important aspects of
programming and every good programmer
should know DSA for better and
efficient algorithms irrespective of
programming language. You can find
tons of lessons for DSA in GeeksforGeeks.
</p>
</div>
</body>
</html>
|
Output:
Implementing vertical scrollspy: For vertical Scrollspy, we need a vertical navbar. We have wrapped our contents inside a row for the vertical view of our navbar.
Example: In this example, we will implement vertical scrollspy.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
body {
position: relative;
}
.navbar-brand {
position: fixed;
}
ul.nav-pills {
top: 40px;
position: fixed;
}
div.col-sm-9 div {
height: 500px;
}
#java {
background: lightblue;
}
#cpp {
background: lightgreen;
}
#dsa {
background: #ffcc66;
}
@media screen and (max-width: 810px) {
#java,
#cpp,
#dsa {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar"
data-offset="20">
<div class="container">
<div class="row">
<nav class="navbar col-sm-3">
<a class="navbar-brand">GeeksforGeeks</a>
<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link" href="#java">Java</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cpp">C++</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dsa">DSA</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="java">
<h4>Java</h4>
<p>
Java is a OOP programming language
and GeeksforGeeks has great
articles on it.
</p>
</div>
<div id="cpp">
<h4>C++</h4>
<p>
C++ is a very popular programming
language used by many developers
and programmers around the world.
It has wide range of applications
from software to backend. I have
learned C++ mostly from GeeksforGeeks
because of the great content."
</p>
</div>
<div id="dsa">
<h4>DSA</h4>
<p>
DSA or Data Structures and Algorithms are
the most important aspects of programming
and every good programmer should know DSA
for better and efficient algorithms irrespective
of programming language. You can find tons of
lessons for DSA in GeeksforGeeks.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output: We have provided a margin of 150px if the screen width is less than 810px.