Bootstrap JS插件使用实例(10)-附加导航(affix)

最新推荐文章于 2023-07-24 22:50:05 发布

djskl

最新推荐文章于 2023-07-24 22:50:05 发布

阅读量5.6k

点赞数

分类专栏：前端

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

bootstrap-affix.js组件，直译过来就是固定，典型的应用就是导航，即当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航(下图)。其实这组件很简单，就是通过检测滚动位置来动态的添加或移除 affix 、 affix-top 、affix-bottom 三个样式，来使导航仍然处在一个合适的位置。当采用标记法，页面加载完毕时，JS插件会搜索页面上所有[data-spy="affix"]的元素，然后找其data-offset-top或data-offset-bottom属性，即离页面顶(底)部少于多少px，然后添加或移除上面的三个样式。

下面介绍如何使用

引入文件

 
   1. 
   <link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> 
  
   2. 
   <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script> 
  
   3. 
   <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-affix.js"></script>

定义样式

定义 .affix .affix-top .affix-bottom样式。具体作用，当页面滚动时：

1.当文档的顶端与窗口顶端的距离小于某一设定的值(阀值)时，.affix-top样式将被添加到绑定的元素上，以控制绑定的元素与其父元素顶端的距离，从而控制与窗口顶端的距离。

2.当绑定元素的底端与窗口底端的距离小于某一设定的值(阀值)时，.affix-bottom样式将被添加到绑定元素上，以控制绑定的元素与其父元素底端的距离，从而控制与窗口底端的距离。

3.其他情况下，绑定元素将具有.affix样式。

 
   01. 
   ul{background-color:#66FF33;list-style-type:none;} 
  
   02. 
   .affix { 
  
   03. 
   top: 50px; 
  
   04. 
   } 
  
   05. 
   .affix-top { 
  
   06. 
   top: 50px; 
  
   07. 
   position:absolute; 
  
   08. 
   } 
  
   09. 
   .affix-bottom { 
  
   10. 
   bottom: 40px; 
  
   11. 
   position:absolute; 
  
   12. 
   }

基本用法

和其他bootstrap插件一样也有俩种设置方法。

1.使用标记

只需把 data-spy="affix" 添加到你想绑定的元素上. 然后使用data-offset-top=""、data-offset-bottom="" 来设置阀值。

1.当文档的顶端与窗口顶端的距离小于data-offset-top设置的值时，.affix-top样式将被添加到绑定的元素上。

2.当绑定元素的底端与窗口底端的距离小于data-offset-bottom设置的值时，.affix-bottom样式将被添加到绑定元素上。

demo：

1. <div data-spy="affix" data-offset-top="200">...</div>

2.使用js

相比于标记法，使用js设置更为灵活，因为它允许为阀值绑定一个函数，在这个函数中我们可以根据情况动态的生成阀值，这对于响应式设计很有用。

如何调用：

$('#navbar').affix(option)

其中参数的用法

名称	类型	默认	描述
offset	number \| function \| object	10	如果只设置了一个数字或设置了一个函数,则俩个阀值都会使用这个数字或函数的返回值 . 如果设置一个对象，可以对俩个阀值分别设置，`{offset: { top: 10,bottom:20 }}`而其中的属性top、bottom可以是个函数，如top: function () { return $window.width() <= 980 ? 290 : 210 }

完整demo:

css代码

 
   01. 
   ul{background-color:#66FF33;list-style-type:none;} 
  
   02. 
   .affix { 
  
   03. 
   top: 50px; 
  
   04. 
   } 
  
   05. 
   .affix-top { 
  
   06. 
   top: 50px; 
  
   07. 
   position:absolute; 
  
   08. 
   } 
  
   09. 
   .affix-bottom { 
  
   10. 
   bottom: 40px; 
  
   11. 
   position:absolute; 
  
   12. 
   }

html代码

 
   01. 
   <div class="container"> 
  
   02. 
   <div class="row"> 
  
   03. 
   <div class="span3"> 
  
   04. 
   <ul id="affix_test"> 
  
   05. 
   <li><a href="#"> 概览</a></li> 
  
   06. 
   <li><a href="#">过渡效果</a></li> 
  
   07. 
   <li><a href="#"> 模态对话框</a></li> 
  
   08. 
   <li><a href="#">下拉菜单</a></li> 
  
   09. 
   <li><a href="#">滚动监听</a></li> 
  
   10. 
   <li><a href="#">标签页</a></li> 
  
   11. 
   <li><a href="#">工具提示</a></li> 
  
   12. 
   <li><a href="#">弹出提示</a></li> 
  
   13. 
   <li><a href="#"> 警告框</a></li> 
  
   14. 
   <li><a href="#">按钮</a></li> 
  
   15. 
   <li><a href="#"> Collapse</a></li> 
  
   16. 
   <li><a href="#">轮播</a></li> 
  
   17. 
   <li><a href="#">输入提示</a></li> 
  
   18. 
   <li><a href="#">附加导航</a></li> 
  
   19. 
   </ul> 
  
   20. 
   </div> 
  
   21. 
   <div class="span9">       
  
   22. 
   <p> 
  
   23. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   24. 
   </p> 
  
   25. 
   <p> 
  
   26. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   27. 
   </p> 
  
   28. 
   <p> 
  
   29. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   30. 
   </p> 
  
   31. 
   <p> 
  
   32. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   33. 
   </p> 
  
   34. 
   <p> 
  
   35. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   36. 
   </p> 
  
   37. 
   <p> 
  
   38. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   39. 
   </p> 
  
   40. 
   <p> 
  
   41. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   42. 
   </p> 
  
   43. 
   <p> 
  
   44. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   45. 
   </p> 
  
   46. 
   <p> 
  
   47. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   48. 
   </p> 
  
   49. 
   <p> 
  
   50. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   51. 
   </p> 
  
   52. 
   <p> 
  
   53. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   54. 
   </p> 
  
   55. 
   <p> 
  
   56. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   57. 
   </p> 
  
   58. 
   <p> 
  
   59. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   60. 
   </p> 
  
   61. 
   <p> 
  
   62. 
   全新 iPod nano 薄度仅为 5.4 毫米，几乎如信用卡般大小，比以往所有的 iPod 都更加纤薄。 2.5 英寸 Multi-Touch 显示屏大小几乎是上一代 iPod nano 显示屏的两倍，因此，你钟爱的音乐、照片和视频都能呈现得更加清晰。按钮可让你快速播放、暂停、切换歌曲，也可调节音量。平滑的全新电镀铝金属设计，令 iPod nano 的触感与其音质一样出色。 如果没有绚丽夺目，难以取舍的缤纷色彩，iPod nano 也就不是 iPod nano 了。 
  
   63. 
   </p> 
  
   64. 
     
   65. 
     
   66. 
   </div> 
  
   67. 
   </div> 
  
   68. 
   </div>

js代码

 
   1. 
   $('#affix_test').affix({ 
  
   2. 
   offset: { 
  
   3. 
   top: function () { return window.width <= 980 ? 50 : 40 } 
  
   4. 
   , bottom: 50 
  
   5. 
   } 
  
   6. 
   })