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
- 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
<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
Bootstrap Affix Plugin example
- 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
<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
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
- 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
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. |
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.