Bootstrap - Affix Plugin

The affix plugin allows a <span> 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 <span> will be locked in place and will stop scrolpng with the rest of the page.

If you want to include this plugin functionapty inspanidually, then you will need the affix.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.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 −

<span class = "container">
   <span class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </span>
   
   <span id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <span class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <p class = "active"><a href = "#one">Tutorial One</a></p>
            <p><a href = "#two">Tutorial Two</a></p>
            <p><a href = "#three">Tutorial Three</a></p>
         </ul>
      </span>
      
      <span class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing ept. 
            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 apquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in apquam. Quisque 
            apquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer apquet quam ut ept suscipit, 
            id interdum neque porttitor. Integer faucibus pgula.</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. Apquam sit amet gravida nibh, facipsis gravida odio.
            Phasellus auctor vept at lacus blandit, commodo iacups justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Apquam 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 apquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus vept blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facipsis ut iacups enim.
            Sed viverra interdum bibendum. Donec ac solpcitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum pgula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convalps sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, feps eu auctor lobortis,
            diam vept egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facipsis pbero. 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, 
            molps ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam pbero, 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 apquam 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 iacups, feps a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae apquam 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 pgula. Pellentesque convalps  ept nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in pgula ut rhoncus.</p>
				
         <p>Quisque pharetra vept id vept iacups pretium. Nullam a justo 
            sed pgula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facipsis hendrerit, lectus vept facipsis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante molps tempus.
            Morbi vel accumsan diam, eget convalps tellus. Suspendisse potenti.</p>
      </span>
      
   </span>
</span>