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.

• 通过JavaScript : 您可以使用JavaScript手动添加元素，如下所示

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

示例

以下示例通过数据属性演示用法 :

         
Bootstrap Affix Plugin example
         
                           Tutorial One            
Tutorial Two
            
Tutorial Three
               
                     Tutorial One         
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.
         
                  Tutorial Two         
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.
         
                  Tutorial Three         
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.
                  $(function () {      $('#myNav').affix({         offset: {            top: 60           }      });   });

定位通过CSS

在上述两种情况下，您必须提供CSS来定位您的内容.词缀插件在三个类之间切换，每个类代表一个特定的状态和减号; .affix，.affix-top和.affix-bottom .按照以下步骤为上述任一用法选项设置CSS.

• 首先，插件添加 .affix-top 表示元素处于最顶端位置.此时不需要CSS定位.

• 滚动浏览要粘贴的元素应触发实际粘贴.这是 .affix 替换 .affix-top 并设置 position:fixed; (由Bootstrap的代码CSS提供).

• 如果定义了底部偏移，则滚动过去应该将 .affix 替换为 .affix-bottom .由于偏移是可选的，因此设置偏移需要您设置适当的CSS.在这种情况下，必要时添加 position:absolute; .

选项

有些选项可以通过数据属性或JavaScript传递，如下表所示 :