Bootstrap Affix Plugin
Bootstrap affix plugin allows a <div> to become affixed to
the location on a particular page in a particular section. It can be included with the help of
affix.js or bootstrap.js while working in bootstrap. It is helpful working for toggle pin off and pin on using this plugin and it is mostly used to make <div> affixed to a particular section or location of a page.
Below here is a sample example I wrote it so you could check on the usage and implementation structure, I hope it's not a hard nut to crack. If you have any queries please leave a comment in the comment box.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>Nirajan Ghimirey's Workshop</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<header class="well text-center">
<h1>Welcome to My Blog.</h1>
<p class="text-success">This is the example of Affix Plug-in</p>
</header>
<div id="myNav" data-spy="affix" data-offset-top="60"
data-offset-bottom="200">
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked affix" data-spy="affix"
data-offset-top="190">
<li class="active"><a href="#one">Home</a></li>
<li><a href="#two">Labels</a></li>
<li><a href="#three">Directory</a></li>
<li><a href="#four">Articles</a></li>
</ul>
</div>
<div class="col-sm-9">
<h2 id="one">Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
metus, dapibus nec turpis vel, semper malesuada ante.
</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus
dictum risus. Pellentesque viverra sagittis quam at mattis.
Suspendisse potenti. Aliquam sit amet gravida nibh,
facilisis gravida odio. </p>
<hr>
<h2 id="two">Lables</h2>
<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam
in sagittis lectus. Suspendisse ultrices placerat accumsan.
Mauris quis dapibus orci. In dapibus velit blandit pharetra
tincidunt. </p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum
lorem convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. </p>
<hr>
<h2 id="three">Directory</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum
enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem
malesuada condimentum. Etiam in</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat
ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis
luctus turpis at accumsan tincidunt.</p>
<hr>
<h2 id="four">Articles</h2>
<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam
in sagittis lectus. Suspendisse ultrices placerat accumsan.
Mauris quis dapibus orci. In dapibus velit blandit pharetra
tincidunt. </p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum
lorem convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html> 
helped me alot ! i like this using-affix-plugin-in-bootstrap topic
ReplyDelete