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 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.

If you want to include this plugin functionality individually, then you will need the affix.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minifiedbootstrap.min.js.

Usage

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

ˇ        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.

Example

The following example demonstrates the usage through 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">Tutorial One</a></li>

            <li><a href = "#two">Tutorial Two</a></li>

            <li><a href = "#three">Tutorial Three</a></li>

         </ul>

      </div>

     

      <div class = "col-md-9">

         <h2 id = "one">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">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">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>

Affix Plugin Data Attributes Demo

ˇ        Via 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

The following example demonstrates the usage through 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">Tutorial One</a></li>

            <li><a href = "#two">Tutorial Two</a></li>

            <li><a href = "#three">Tutorial Three</a></li>

         </ul>

      </div>

     

      <div class = "col-md-9">

         <h2 id = "one">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">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">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>

Affix Plugin Javascript 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. Follow the below steps to set your CSS for either of the above usage options.

ˇ        To start, the plugin adds .affix-top to indicate the element is in its 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 .affixwith .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 certain options which can be passed via data attributes or JavaScript as listed in the following table −

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.