Bootstrap Affix Plugin

Affix plugin allow to pinned element on the page and you can toggle it’s pinning on and off using this Bootstrap Affix Plugin. The pinning of any tag or element is enabled via changing the value of CSS property “position” from static to fix. In this tutorial we will learn that how to use Affix plugin.

If you want to implement functionality of this plugin individually, simple include the affix.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Usage

You can use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Via data attributes

To easily add affix behavior to any element, just add data-spy=”affix” to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
 ...
</div>

Example

This example shows the usage via data attributes:

<div class="container">
 <div class="jumbotron">
 <h1>Bootstrap Affix Plugin example</h1>
 </div>
 <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">Affix Tutorial One</a></li>
 <li><a href="#two">Affix Tutorial Two</a></li>
 <li><a href="#three">Affix Tutorial Three</a></li>
 </ul>
 </div>
 <div class="col-md-9">
 <h2 id="one">Affix Tutorial One</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. 
 Vestibulum id metus ac nisl bibendum scelerisque non non 
 purus. Suspendisse varius nibh non aliquet sagittis. In 
 tincidunt orci sit amet elementum vestibulum. Vivamus 
 fermentum in arcu in aliquam. Quisque aliquam porta odio 
 in fringilla. Vivamus nisl leo, blandit at bibendum eu, 
 tristique eget risus. Integer aliquet quam ut elit suscipit, 
 id interdum neque porttitor. Integer 
 faucibus ligula.</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. Phasellus auctor velit at lacus 
 blandit, commodo iaculis justo viverra. Etiam vitae est 
 arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
 quam tortor, commodo ac dui quis, bibendum viverra erat. 
 Maecenas mattis lectus enim, quis tincidunt dui molestie 
 euismod. Curabitur et diam tristique, accumsan nunc eu, 
 hendrerit tellus.</p>
 <hr>
 <h2 id="two">Affix Tutorial Two</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. Quisque non sapien nec lacus condimentum facilisis 
 ut iaculis enim. Sed viverra interdum bibendum. Donec ac 
 sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
 Phasellus congue vestibulum ligula sed consequat.</p>
 <p>Vestibulum consectetur scelerisque lacus, ac fermentum 
 lorem convallis sed. Nam odio tortor, dictum quis malesuada at, 
 pellentesque vitae orci. Vivamus elementum, felis eu auctor 
 lobortis, diam velit egestas lacus, quis fermentum metus ante 
 quis urna. Sed at facilisis libero. Cum sociis natoque 
 penatibus et magnis dis parturient montes, nascetur ridiculus 
 mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
 molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
 augue, hendrerit non sapien in, mollis ornare augue.</p>
 <hr>
 <h2 id="three">Affix Tutorial Three</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 aliquam lectus. Nam vel sapien 
 diam. Donec pharetra id arcu eget blandit. Proin imperdiet 
 mattis augue in porttitor. Quisque tempus enim id lobortis 
 feugiat. Suspendisse tincidunt risus quis dolor fringilla 
 blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
 iaculis, felis a pretium ornare, dolor nisl semper tortor, vel 
 sagittis lacus est consequat eros. Sed id pretium nisl. 
 Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
 amet mauris. </p>
 <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
 ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
 luctus turpis at accumsan tincidunt. Phasellus risus risus, 
 volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
 hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
 ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
 ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
 convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
 ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
 pellentesque neque et elementum tempus. Curabitur bibendum in 
 ligula ut rhoncus.</p>
 <p>Quisque pharetra velit id velit iaculis pretium. Nullam a
 justo sed ligula porta semper eu quis enim. Pellentesque 
 pellentesque, metus at facilisis hendrerit, lectus velit 
 facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
 viverra lorem elementum interdum ultricies. Suspendisse 
 accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
 eget convallis tellus. Suspendisse potenti.</p>
 </div>
 </div>
</div>

Demo

Via JavaScript

You can call the affix plugin manually with JavaScript as below:

$('#my-Affix').affix(
 offset: 
 top: 100, bottom: function () 
 return (this.bottom = 
 $('.bs-footer').outerHeight(true))
 
 
)

Example

This example show the usage via data attributes:

<div class="container">
 <div class="jumbotron">
 <h1>Bootstrap Affix Plugin example</h1>
 </div>
 <div>
 <div class="col-md-3">
 <ul class="nav nav-tabs nav-stacked affix" id="myNav">
 <li class="active"><a href="#one">Affix Tutorial One</a></li>
 <li><a href="#two">Affix Tutorial Two</a></li>
 <li><a href="#three">Affix Tutorial Three</a></li>
 </ul>
 </div>
 <div class="col-md-9">
 <h2 id="one">Affix Tutorial One</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. 
 Vestibulum id metus ac nisl bibendum scelerisque non non 
 purus. Suspendisse varius nibh non aliquet sagittis. In 
 tincidunt orci sit amet elementum vestibulum. Vivamus 
 fermentum in arcu in aliquam. Quisque aliquam porta odio 
 in fringilla. Vivamus nisl leo, blandit at bibendum eu, 
 tristique eget risus. Integer aliquet quam ut elit suscipit, 
 id interdum neque porttitor. Integer 
 faucibus ligula.</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. Phasellus auctor velit at lacus 
 blandit, commodo iaculis justo viverra. Etiam vitae est 
 arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
 quam tortor, commodo ac dui quis, bibendum viverra erat. 
 Maecenas mattis lectus enim, quis tincidunt dui molestie 
 euismod. Curabitur et diam tristique, accumsan nunc eu, 
 hendrerit tellus.</p>
 <hr>
 <h2 id="two">Affix Tutorial Two</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. Quisque non sapien nec lacus condimentum facilisis 
 ut iaculis enim. Sed viverra interdum bibendum. Donec ac 
 sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
 Phasellus congue vestibulum ligula sed consequat.</p>
 <p>Vestibulum consectetur scelerisque lacus, ac fermentum 
 lorem convallis sed. Nam odio tortor, dictum quis malesuada at, 
 pellentesque vitae orci. Vivamus elementum, felis eu auctor 
 lobortis, diam velit egestas lacus, quis fermentum metus ante 
 quis urna. Sed at facilisis libero. Cum sociis natoque 
 penatibus et magnis dis parturient montes, nascetur ridiculus 
 mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
 molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
 augue, hendrerit non sapien in, mollis ornare augue.</p>
 <hr>
 <h2 id="three">Affix Tutorial Three</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 aliquam lectus. Nam vel sapien 
 diam. Donec pharetra id arcu eget blandit. Proin imperdiet 
 mattis augue in porttitor. Quisque tempus enim id lobortis 
 feugiat. Suspendisse tincidunt risus quis dolor fringilla 
 blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
 iaculis, felis a pretium ornare, dolor nisl semper tortor, vel 
 sagittis lacus est consequat eros. Sed id pretium nisl. 
 Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
 amet mauris. </p>
 <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
 ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
 luctus turpis at accumsan tincidunt. Phasellus risus risus, 
 volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
 hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
 ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
 ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
 convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
 ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
 pellentesque neque et elementum tempus. Curabitur bibendum in 
 ligula ut rhoncus.</p>
 <p>Quisque pharetra velit id velit iaculis pretium. Nullam a
 justo sed ligula porta semper eu quis enim. Pellentesque 
 pellentesque, metus at facilisis hendrerit, lectus velit 
 facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
 viverra lorem elementum interdum ultricies. Suspendisse 
 accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
 eget convallis tellus. Suspendisse potenti.</p>
 </div>
 </div>
</div>
<script type="text/javascript">
 $(function () 
 $('#myNav').affix(
 offset: 
 top: 60 
 
 );
 );
</script>

Demo

Positioning via CSS

In both the above situations, you must provide CSS for the positioning of your content. The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. These following steps will help you to set your CSS for either of the above usage options.

• 
  

  To start, the plugin adds .affix-top to indicate the element is in it’s top-most position. At this point no CSS positioning is required.

  
  


• 
  

  Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap’s code CSS).

  
  


• 
  

  If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary.

  
  

Options

There are some options can be passed via data attributes or JavaScript are listed below. For data attributes, append the option name to data-, as in data-offset-top="200".

Option Name	Type	Default	Data attribute name	Description
offset	number | function | object	10	data-offset	Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: top: 10 or offset: top: 10, bottom: 5 . Use a function when you need to dynamically calculate an offset.
target	selector | node | jQuery element	the window object	data-taget	Specifies the target element of the affix.

Events

Bootstrap’s affix class exposes a few events for hooking into affix functionality.

Event Type	Description
affix.bs.affix	This event fires immediately before the element has been affixed.
affixed.bs.affix	This event is fired after the element has been affixed.
affix-top.bs.affix	This event fires immediately before the element has been affixed-top.
affixed-top.bs.affix	This event is fired after the element has been affixed-top.
affix-bottom.bs.affix	This event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affix	This event is fired after the element has been affixed-bottom.

Bootstrap Affix Plugin