Bootstrap每天必学之附加导航(Affix)插件


Posted in Javascript onApril 25, 2016

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。
如果您想要单独引用该插件的功能,那么您需要引用 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 来传递的。下表列出了这些选项:

Bootstrap每天必学之附加导航(Affix)插件

四、实例
附加导航即粘贴在屏幕某处实现锚点功能。
1、基本实例

<body data-spy="scroll" data-target="#myScrollspy">

 <div class="container">
 <div class="jumbotron" style="height:150px">
 <h1>Bootstrap Affix</h1>
 </div>
 <div class="row">
 <div class="col-xs-3" id="myScrollspy">
 <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
  <li class="active">
  <a href="#section-1">第一部分 </a>
  </li>
  <li>
  <a href="#section-2">第二部分</a>
  </li>
  <li>
  <a href="#section-3">第三部分</a>
  </li>
  <li>
  <a href="#section-4">第四部分</a>
  </li>
  <li>
  <a href="#section-4">第五部分</a>
  </li>
 </ul>
 </div>
 <div class="col-xs-9">
 <h2 id="section-1">第一部分</h2>
 <p>
  ...
 </p>
 <h2 id="section-2">第二部分</h2>
 <p>
  ...
 </p>
 <h2 id="section-3">第三部分</h2>
 <p>
  ...
 </p>
 <h2 id="section-4">第四部分</h2>
 <p>
  ...
 </p>
 <h2 id="section-5">第四部分</h2>
 <p>
  ...
 </p>
 </div>

 </div>
 </div>

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 包含几个事件,如下:

Bootstrap每天必学之附加导航(Affix)插件

//其他雷同

$('#myAffix').on('affixed-top.bs.affix', function() {
 alert('触发!');
});

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。 

Javascript 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
基于node实现websocket协议
Apr 25 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
求职自荐信范文格式
2013/11/29 职场文书
会计系中文个人求职信
2013/12/24 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
高中物理教学反思
2014/02/08 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
论文答辩开场白大全
2015/05/27 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android