Bootstrap HTML5

How to use Bootstrap Affix Plugin

Written by Rajesh Chauhan

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.

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.

Adding Style using CSS

in this step we are adding css to fixed navbar on top.

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.

About the author

Rajesh Chauhan

Hi, This is Rajesh Chauhan from am a Web Developer, Blogger, Online Instructor and SEO consultant who has been working online for last 4 years and he is running several successful websites on the internet. Find best Web Hosting Black Friday Deals

Leave a Comment