Bootstrap每天必学之附加导航(Affix)插件_javascript技巧
如果您想要单独引用该插件的功能,那么您需要引用 affix.js。
一、用法
可以通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件。
1、通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
2、通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix)
二、通过 CSS 定位
在上面两种使用附加导航(Affix)插件的方式中,您都必须通过 CSS 定位内容。附加导航(Affix)插件在三种 class 之间切换,每种 class 都呈现了特定的状态: .affix、.affix-top 和 .affix-bottom。请按照下面的步骤,来为这三种状态设置您自己的 CSS(不依赖此插件)。
1、在开始时,插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
2、当滚动经过添加了附加导航(Affix)的元素时,应触发实际的附加导航(Affix)。此时 .affix 会替代 .affix-top,同时设置 position: fixed;(由 Bootstrap 的 CSS 代码提供)。
3、如果定义了底部偏移,当滚动到达该位置时,应把 .affix 替换为 .affix-bottom。由于偏移是可选的,假如设置了该偏移,则要求同时设置适当的 CSS。在这种情况下,请在必要的时候添加 position: absolute;。
三、选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
四、实例
附加导航即粘贴在屏幕某处实现锚点功能。
1、基本实例
Bootstrap Affix
第一部分
...
第二部分
...
第三部分
...
第四部分
...
第四部分
...
2、导航的 CSS 部分
ul.nav-pills { width: 200px; } ul.nav-pills.affix { top: 30px; } //JavaScript 代替 data-spy="affix" data-offset-top="125" $('#myAffix').affix({ offset : { top : 150 } })
我们默认使用的是 top,当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。
//设置成 bottom ul.nav-tabs.affix-bottom { bottom: 30px; } //设置成 bottom $('#myAffix').affix({ offset : { bottom : 150 } })
Affix 包含几个事件,如下:
//其他雷同 $('#myAffix').on('affixed-top.bs.affix', function() { alert('触发!'); });
更多内容可以参考:Bootstrap学习教程
以上就是本文的全部内容,希望对大家的学习有所帮助。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
上一篇: 向前兼容
下一篇: php怎么处理不可见字符
推荐阅读
-
Bootstrap每天必学之简单入门_javascript技巧
-
Bootstrap每天必学之导航_javascript技巧
-
Bootstrap每天必学之缩略图与警示窗_javascript技巧
-
Bootstrap每天必学之按钮_javascript技巧
-
Bootstrap每天必学之简单入门_javascript技巧
-
Bootstrap每天必学之基础排版_javascript技巧
-
Bootstrap每天必学之缩略图与警示窗_javascript技巧
-
Bootstrap每天必学之表格_javascript技巧
-
Bootstrap每天必学之媒体对象_javascript技巧
-
Bootstrap每天必学之js插件_javascript技巧
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论