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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
原生js实现放大镜特效
Mar 08 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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
php中常用编辑器推荐
2007/01/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
js对象简介与基本用法示例
2020/03/13 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python中特殊函数集锦
2015/07/27 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python绘制随机网络图形示例
2019/11/21 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
学生自我鉴定范文
2013/10/04 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
单位委托书范本
2014/04/04 职场文书
保护环境标语
2014/06/09 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
施工安全协议书范本
2014/09/26 职场文书
保卫工作个人总结
2015/03/03 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书