Bootstrap affix plugin use to fixed positioning on a navbar or any other element automatically when they are scrolled beyond a certain distance as well as toggle its pinning an and off using the bootstrap affix plugin. The pinning of an element is enabled through changing the value of its position CSS property from static to fixed. the affix plugin toggles between three classes .affix, .affix-top and .affix-bottom. the plugin adds .affix, .affix-top and .affix-bottom class to indicate the element is in its top-most or bottom-most position. When the element scrolling past offset linit provided by the “data-offset-” attribute the plugin replaces the . affix-top or .affix-bottom class with .affix class , which trigger the actual fixing.
How to use Bootstrap Affix Plugin
Getting Bootsrap
Bootstrap can be Download to your needs from their Getting Started page but i would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.
Adding Bootstrap Library
after download bootstrap we need to bootstrap library file in your page and in this step we going to add library file.
|
1 2 3 |
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> |
Creating Navbar Sticky
You can add easily affix behaviour to make sticky any element us just add data-spy=”affix” to the element you want to spy on. Then use data-offset- attributes to define when to toggle the pinning of an element on and off.
|
1 2 3 4 5 6 7 8 9 10 |
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Services</a></li> <li><a href="#" target="_blank">Blog</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#" target="_blank">Contact Us</a></li> </ul> </nav> |
Adding Style using CSS
in this step we are adding css to fixed navbar on top.
|
1 2 3 4 5 6 7 8 9 10 |
<style> .affix { top: 0; width: 100%; } .affix + .container-fluid { padding-top: 70px; } </style> |
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.
