Bootstrap Scrollspy
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
Example
Bootstrap Example
This is a example of Bootstrap Scrollspy
This is a example of Bootstrap Scrollspy
This is a example of Bootstrap Scrollspy
This is a example of Bootstrap Scrollspy
This is a example of Bootstrap Scrollspy
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
Example
<!DOCTYPE
html>
<html>
<head>
<title>Bootstrap
Example</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body
{
position:
relative;
}
#Part1
{padding-top:50px;height:500px;color:
#000;
background-color:
#FF6E42;}
#Part2
{padding-top:50px;height:500px;color:
#000;
background-color:
#644F01;}
#Part3
{padding-top:50px;height:500px;color:
#000;
background-color:
#B7B3A8;}
#Part41
{padding-top:50px;height:500px;color:
#000;
background-color:
#F18D00;}
#Part42
{padding-top:50px;height:500px;color:
#000;
background-color:
#169303;}
</style>
</head>
<body
data-spy="scroll"
data-target=".navbar"
data-offset="50">
<nav
class="navbar
navbar-inverse navbar-fixed-top">
<div
class="container-fluid">
<div
class="navbar-header">
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div>
<div
class="collapse
navbar-collapse"
id="myNavbar">
<ul
class="nav
navbar-nav">
<li><a
href="#Part1">Part
1</a></li>
<li
class="dropdown"><a
class="dropdown-toggle"
data-toggle="dropdown"
href="#">Part
4 <span
class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a
href="#Part41">Part
4-1</a></li>
<li><a
href="#Part42">Part
4-2</a></li>
</ul>
</li>
<li><a
href="#Part2">Part
2</a></li>
<li><a
href="#Part3">Part
3</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div
id="Part1"
class="container-fluid">
<h1>Part
1</h1>
<p>This
is a example of Bootstrap Scrollspy</p>
<p>This
is a example of Bootstrap Scrollspy</p>
</div>
<div
id="Part2"
class="container-fluid">
<h1>Part
2</h1>
<p>This
is a example of Bootstrap Scrollspy</p>
<p>This
is a example of Bootstrap Scrollspy</p>
</div>
<div
id="Part3"
class="container-fluid">
<h1>Part
3</h1>
<p>This
is a example of Bootstrap Scrollspy</p>
<p>This
is a example of Bootstrap Scrollspy</p>
</div>
<div
id="Part41"
class="container-fluid">
<h1>Part
4 Submenu 1</h1>
<p>This
is a example of Bootstrap Scrollspy</p>
<p>This
is a example of Bootstrap Scrollspy</p>
</div>
<div
id="Part42"
class="container-fluid">
<h1>Part
4 Submenu 2</h1>
<p>This
is a example of Bootstrap Scrollspy</p>
<p>This
is a example of Bootstrap Scrollspy</p>
</div>
</body>
</html>
Output :
Part 1
This is a example of Bootstrap ScrollspyThis is a example of Bootstrap Scrollspy
Part 2
This is a example of Bootstrap ScrollspyThis is a example of Bootstrap Scrollspy
Part 3
This is a example of Bootstrap ScrollspyThis is a example of Bootstrap Scrollspy
Part 4 Submenu 1
This is a example of Bootstrap ScrollspyThis is a example of Bootstrap Scrollspy
Part 4 Submenu 2
This is a example of Bootstrap ScrollspyThis is a example of Bootstrap Scrollspy
