Bootstrap Affix

0 3817

Bootstrap Affix used for "fix" the position of navigation section, while allowing us to add vertical offsets to this fixed element. Through this you can fixed your vertical / list menus in right/left of your website / web pages as your need.

It's very important tool, because some time we require to create long web page from top to bottom, then we want right or left side navigation still fixed, because if we are on middle or bottom of the page, then we can easily go to another page through that navigation without any go to top of page.

For briefly understand, please copy and paste below example on your website or webpage, You can feel free modify also.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<div class="jumbotron">
<h1 class="text-align"> Bootstrap Affix </h1>
</div>
<div class="col-md-2">
<ul class="nav nav-stacked affix">
<li><a href="#" class="bg-success"> Home </a></li>
<li><a href="#" class="bg-success"> About us </a></li>
<li><a href="#" class="bg-success"> Services </a></li>
<li><a href="#" class="bg-success"> Contact us </a></li>

</ul>
</div>

<div class="col-md-8">
<h2> About us </h2>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. Aenean ut dui et felis fermentum congue. Aliquam elementum semper leo, id scelerisque enim tempor eget. In ultrices ullamcorper dolor, rhoncus venenatis velit lacinia vel. Maecenas ante ante, rhoncus eget feugiat sit amet, porta in mauris. Curabitur non tellus eu nisi elementum dapibus. Integer dictum ante ac lacinia imperdiet. Quisque congue ante non risus lobortis, ut blandit arcu consequat. In non diam vel nibh molestie sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet blandit nunc, a pulvinar odio fringilla nec.

Suspendisse vitae magna neque. Vestibulum elementum nibh in orci egestas, nec dapibus neque varius. Nullam hendrerit, turpis quis tempor mollis, augue augue aliquet turpis, eu pellentesque augue neque id erat. Donec bibendum pulvinar libero, sit amet posuere neque auctor eu. Phasellus non nisi vitae tellus hendrerit facilisis vitae sed lectus. Vestibulum non est aliquet, porta tellus sit amet, aliquam eros. Nullam porta sagittis nisi, sit amet gravida nisl.

Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae.
</p>

</div>
<div class="col-md-2">
<ul class="nav nav-stacked affix">
<li><a href="#" class="bg-success"> Home </a></li>
<li><a href="#" class="bg-success"> About us </a></li>
<li><a href="#" class="bg-success"> Services </a></li>
<li><a href="#" class="bg-success"> Contact us </a></li>

</ul>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</html>