Scroll Spy
Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy is used to update the navigation links when scrolling the page. The following attributes are added with the elements for the implementation of this feature.
Attribute | Description | Syntax |
---|---|---|
Data-spy | This element is added to the scrollable area. | data-spy=”scroll” |
Data-target | Connects the navigation bar with the scrollable area. | data-target = “.id” |
Data-offset | Specifies the number of pixels to offset from the top. | data-offset = “value” |
Example Code:
<!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/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 18px;
}
a {
color: green;
}
#section1 {
color: white;
background-color: green;
}
#section2 {
color: green;
background-color: white;
}
#section3 {
color: white;
background-color: green;
}
#section4 {
color: green;
background-color: white;
}
@media screen and (max-width: 810px) {
#section1,
#section2,
#section3,
#section4 {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">
Section 1</a>
</li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<center>
<h1>Section 1</h1>
<h3>w3wiki</h3>
<h5>A computer science portal for geeks.</h5>
<h6> This portal has been created to
provide well written, well thought
and well explained solutions for
selected questions related to
programming, algorithms, other
computer science subjects.
</h6>
<p>Scroll this section and see the
navigation list while scrolling.
</p>
</center>
</div>
<div id="section2">
<center>
<h1>Section 2</h1>
<h3>w3wiki</h3>
<h5>A computer science portal for geeks.</h5>
<h6> This portal also provide GATE
previous year papers, short notes
for the aspirants.
</h6>
<p>Scroll this section and see the
navigation list while scrolling.
</p>
</center>
</div>
<div id="section3">
<center>
<h1>Section 3</h1>
<h3>w3wiki</h3>
<h5>A computer science portal for geeks.</h5>
<h6>This portal also provide interview
questions asked by private and
public sectors.
</h6>
<p>Scroll this section and see the
navigation list while scrolling.
</p>
</center>
</div>
<div id="section4">
<center>
<h1>Section 4</h1>
<h3>w3wiki</h3>
<h5>A computer science portal for geeks.</h5>
<h6>It also provide Internship aor
contributor program for students.
</h6>
<p>Scroll this section and see the
navigation list while scrolling.
</p>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.