In this we will discuss the Bootstrap affix plugin.
Bootstrap tutorial for beginners
The Bootstrap affix plugin is used to pin elements such as a navbar when they are scrolled beyond a certain point.
Affix plugin Attributes
Here's how the affix plugin works:
1. To start with, the plugin adds affix-top class to indicate the element is in its top-most position.
2. As we scroll down beyond the offset limit imposed by data-offset attribute, the plugin replaces the affix-top class with affix class which sets the position to fixed.
3. At this point we will have to tell the plugin at what position from the top or bottom we want the element to be fixed. In our example, we want the navigation menu to be fixed at 20 pixels from the top. This is the reason we have set top property value to 20px in the affix class.
Bootstrap tutorial for beginners
The Bootstrap affix plugin is used to pin elements such as a navbar when they are scrolled beyond a certain point.
Affix plugin Attributes
| Attribute | Description |
|---|---|
| data-spy="affix" | Apply this attribute on the element that you want to affix |
| data-offset-top | Specifies when to toggle the pinning of an element |
Here's how the affix plugin works:
1. To start with, the plugin adds affix-top class to indicate the element is in its top-most position.
2. As we scroll down beyond the offset limit imposed by data-offset attribute, the plugin replaces the affix-top class with affix class which sets the position to fixed.
3. At this point we will have to tell the plugin at what position from the top or bottom we want the element to be fixed. In our example, we want the navigation menu to be fixed at 20 pixels from the top. This is the reason we have set top property value to 20px in the affix class.
.affix {
top: 20px;
}
<!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;
}
.affix {
top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Bootstrap Affix Example</h1>
</div>
</div>
<div class="col-xs-3">
<nav id="mainNavbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="200">
<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="#" class="dropdown-toggle" data-toggle="dropdown">
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>
</nav>
</div>
<div class="col-xs-9">
<div id="divDesert">
<h1>Desert</h1>
<img src="Images/Desert.jpg" class="img-responsive" />
</div>
<div id="divLighthouse">
<h1>Lighthouse</h1>
<img src="Images/Lighthouse.jpg" class="img-responsive" />
</div>
<div id="divTulips">
<h1>Tulips</h1>
<img src="Images/Tulips.jpg" class="img-responsive" />
</div>
<div id="divJellyfish">
<h1>Jellyfish</h1>
<img src="Images/Jellyfish.jpg" class="img-responsive" />
</div>
<div id="divPenguins">
<h1>Penguins</h1>
<img src="Images/Penguins.jpg" class="img-responsive" />
</div>
</div>
</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>
<script type="text/javascript">
$(document).ready(function () {
$('body').scrollspy({
target: '#mainNavbar',
offset: 10
});
});
</script>
</body>
</html>
