In this we will discuss the bootstrap scrollspy plugin.
Bootstrap tutorial for beginners
The scrollspy plugin automatically highlights the navigation links based on the scroll position to indicate where the user is currently on the page. Here is an example.
As we scroll down the page, the respective navigation links in the navigation bar are automatically highlighted.
Bootstrap tutorial for beginners
The scrollspy plugin automatically highlights the navigation links based on the scroll position to indicate where the user is currently on the page. Here is an example.
As we scroll down the page, the respective navigation links in the navigation bar are automatically highlighted.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap tutorial for begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="CustomStyles.css" rel="stylesheet" />
<style type="text/css">
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#mainNavBar" data-offset="10">
<nav id="mainNavBar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#divDesert">Desert</a></li>
<li><a href="#divLighthouse">Lighthouse</a></li>
<li><a href="#divTulips">Tulips</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Animals <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#divJellyfish">Jellyfish</a>
</li>
<li>
<a href="#divPenguins">Penguins</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="divDesert" class="divStyle">
<h1>Desert</h1>
<img src="Images/Desert.jpg" class="img-responsive" />
</div>
<div id="divLighthouse" class="divStyle">
<h1>Lighthouse</h1>
<img src="Images/Lighthouse.jpg" class="img-responsive" />
</div>
<div id="divTulips" class="divStyle">
<h1>Tulips</h1>
<img src="Images/Tulips.jpg" class="img-responsive" />
</div>
<div id="divJellyfish" class="divStyle">
<h1>Jellyfish</h1>
<img src="Images/Jellyfish.jpg" class="img-responsive" />
</div>
<div id="divPenguins" class="divStyle">
<h1>Penguins</h1>
<img src="Images/Penguins.jpg" class="img-responsive" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
| Scrollspy Configuration | |
|---|---|
| data-spy="scroll" | This attribute is appliied on the element that is being spied on. In most cases this is the body element |
| data-target="#mainNavBar" | This attribute links the scrollable element (body element) with the navigation element (navbar). This attribute is also applied on the body element in most cases |
| data-offset="10" | Specifies the number of pixels to offset from top when calculating the position of scroll. This is extremely useful to control when the navigation links should be highlighted as the page is being scrolled. This attribute is optional and the default is 10 pixels |
| The navigtion menu items are linked to the scrollable sections on the page, by making the href attribute of the navigation item point to the id of the scrollable section | |
| The element with data-spy="scroll" requires the CSS position to be relative | |
.png)
