Bootstrap | Affix Plugin

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we will be discussing about the Bootstrap Affix Plugin.

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 making use of this plugin. A common example of this are social icons. They will begin in a location, but as the page attains a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.

If you want to add this bootstrap plugin functionality individually, you are going to need affix.js. Else, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.

Usage

The affix plugin can be used in the following two ways -

• Via data attributes - To easily add the 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 pinning of an element.

Example

Following example demonstrates the usage of affix plugin 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">First Tutorial</a></li>
            <li><a href = "#two">Second Tutorial</a></li>
            <li><a href = "#three">Third Tutorial</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">First Tutorial</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">Second Tutorial</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">Third Tutorial</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>

Output

When the above example is executed, it will produce the following result -

Bootstrap Affix Plugin example
First Tutorial
Second Tutorial
Third Tutorial
FirstTutorial
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.
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.
Second Tutorial
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.
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.
Third Tutorial
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.
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.
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.

READ: Bootstrap | Carousel Plugin

• Using JavaScript - You can affix an element manually with JavaScript as shown below -

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

Example

Following example demonstrates the usage of affix plugin via JavaScript -

<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">First Tutorial</a></li>
            <li><a href = "#two">Second Tutorial</a></li>
            <li><a href = "#three">Third Tutorial</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">First Tutorial</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">Second Tutorial</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">Third Tutorial</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>

Output

When the above example is executed, it will produce the following result -

Bootstrap Affix Plugin example
First Tutorial
Second Tutorial
Third Tutorial
First Tutorial
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.
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.
Second Tutorial
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.
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.
Third Tutorial
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.
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.
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.

READ: Bootstrap | Collapse Plugin

Positioning via CSS

In both cases above, 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. Following below are the steps that you can use to set your CSS for either of the above usage options -

• To start, the plugin adds the .affix-top class to indicate that the element is in its top-most position. At this point, no CSS positioning is required.

• Scrolling past the element you want affixed should trip 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 class with affix-bottom. Since offsets are optional, setting one needs you to set the appropriate CSS. In this case, add position: absolute; when necessary.

Options

There are some options that can be passed via data attributes or JavaScript. Following table below lists down these options -

Option Name	Type/Default Value	Data attribute name	Description
offset	number | function | object Default: 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 the 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.

READ: Bootstrap | Button Plugin

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we wil be introducing ReactJS to you guys.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.