Bootstrap Affix 插件 - 附加導航

Bootstrap Affix 插件可以讓一個<div>元素漂浮在網頁上，你可以讓該<div>元素隨屏滾動，或者固定在指定位置上。

用法： 你可以通過data屬性或者通過JavaScript來使用Affix 插件。

1、通過data屬性

你只需為需要監聽的頁面元素添加data-spy="affix"即可。然後使用偏移量來確定一個元素的開和關.

實例

以下實例通過data屬性來演示Affix 插件的使用：

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

線上實例演示

2、通過javascript調用

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

實例

以下實例通過javascript屬性來演示 Affix 插件的使用：

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

線上實例演示

通過 CSS 定位

Affix插件在三種狀態之間切換：affix、affix-top和affix-bottom。你必須為這三種狀態提供自己的樣式（不依賴此插件）。

affix-top class應當是在正常文檔流中的狀態。affix class應當是以fixed方式定位時的狀態。affix-bottom應當是以absolute方式定位時的狀態。

選項

選項的傳遞可通過數據屬性或JavaScript. 對於數據屬性, 需要附加選項名稱 data-, 如 data-offset-top="200"。