We now have a youtube channel. Subscribe!

Bootstrap | Affix Plugin

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

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.



  • 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

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.



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 NameType/Default ValueData attribute nameDescription
offsetnumber | function | object Default: 10data-offsetPixels 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.


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain