Bootstrap 2 Affix 插件 - 附加导航

Bootstrap Affix 插件可以让一个 <div> 元素漂浮在网页上

panel demo

我们可以该 <div> 元素随屏滚动,或者固定在指定位置上

我们可以通过 data 属性或者通过 JavaScript 来使用 Affix 插件

通过 data 属性

我们只需为需要监听的页面元素添加 data-spy="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>

运行范例 »

运行以上范例,输出如下

panel demo

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 src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script>
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>
<script>
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

运行范例 »

运行以上范例,输出如下

panel demo

通过 CSS 定位

Affix 插件在三种状态之间切换:affix、affix-top 和affix-bottom

我们必须为这三种状态提供自己的样式 (不依赖此插件)

  1. affix-top CSS class 应当是在正常文档流中的状态
  2. affix CSS class应当是以 fixed 方式定位时的状态
  3. affix-bottom应当是以absolute方式定位时的状态

选项

选项的传递可通过数据属性或JavaScript. 对于数据属性, 需要附加选项名称 data-, 如 data-offset-top="200"

  1. offset

    数值类型或函数或对象

    默认值为 0

    计算从顶部到滚动的位置的偏移(像素)

    如果设置了一个数字, 该偏移量的值将被应用在顶部和左方向

    如果要设置一个方向或者多个方向的偏移量, 只需提供一个对象offset: { x: 10 }

    该函数可以让你动态的提供一个偏移量(对于一些响应式设计很有用)

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.