top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

What is affix plugin in bootstrap and why it is used?

0 votes
41 views
What is affix plugin in bootstrap and why it is used?
posted Jul 7, 2017 by Subhajit Maity

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.

Usage

You can use the affix plugin via data attributes or manually with your own JavaScript as discussed below.

Enable Affix via Data Attributes

You can easily add affix behavior to any element — just add data-spy="affix" to the element you want to spy on. Then add the data-offset-top|bottom attribute to calculate the position of the scroll.

Example

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="195">
    <li class="active"><a href="#one">Section One</a></li>
    <li><a href="#two">Section Two</a></li>
    <li><a href="#three">Section Three</a></li>
</ul>

Enable Affix via JavaScript

You may also enable the affix plugin manually using the JavaScript — just call the affix() method with the id or class selector of the required element in your JavaScript code.

Example

<script type="text/javascript">
$(document).ready(function(){
    $("#myNav").affix({
        offset: { 
            top: $(".header").outerHeight(true)
        }
    });
});
</script>
answer Jul 8, 2017 by Naveen Kumar
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...