Suggested Video Tutorials
Part 47 - Bootstrap scrollspy
Part 48 - Bootstrap scrollspy not working
Part 49 - Bootstrap scrollspy vertical menu
In this video we will discuss the Bootstrap affix plugin.
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.
Part 47 - Bootstrap scrollspy
Part 48 - Bootstrap scrollspy not working
Part 49 - Bootstrap scrollspy vertical menu
In this video we will discuss the Bootstrap affix plugin.
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>
No comments:
Post a Comment
It would be great if you can help share these free resources