java 导航插件_Bootstrap每天必学之附加导航(Affix)插件_javascr
附加导航(Affix)插件允许某个
如果您想要单独引用该插件的功能,那么您需要引用 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每天必学之附加导航(Affix)插件_javascr"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/434.html
java 导航插件_Bootstrap每天必学之附加导航(Affix)插件_javascr相关推荐
- Java反射机制大神必学系列之 ,高级与低级的差别在哪里?
Java反射机制大神必学系列之 ,高级与低级的差别在哪里? java学习爱好者 2019-05-20 19:08 前言 今天介绍下Java的反射机制,以前我们获取一个类的实例都是使用new一个实例出来 ...
- 14个java编程技巧,小白必学
1.小心使用 String 因为字符串相加或者拼接的方式都会在对象池中查找字符串是否存在,如果不存在则创建,这样在拼接的过程中会产生大量中间过程的字符串,占用内存资源.StringBuilder效率优 ...
- java成为移动互联网时代必学语言的六大理由
2019独角兽企业重金招聘Python工程师标准>>> 移动互联网到底是什么? 移动互联网的本质仍然是互联网,特点在于"移动"二字. 其实就是多了个客户端类型:手 ...
- Java开发者学习 linux系统 必学
linux对于Java开发来说,不需要像运维那种,学习的那么深入,但是还是要掌握基础的命令. 学习路线可以参考如下: 尤其是前面五种,必须掌握 文件/目录操作:创建.查看.移动.改名.删除.复制 进程 ...
- 栅格布局一般怎么用_Bootstrap每天必学之栅格系统(布局)
1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格 ...
- 【笔记-java】java工程师-入门必学
路径 目录 子目录 重点 课程名 备注 java工程师 入门必学 语法基础 环境搭建.开发工具使用.基础语法 java入门第一季 面向对象 继承.封装.多态 java入门第二季 常用工具类 异常.字符 ...
- java 委托_动态代理:Java开发必学
一句话概括:java 动态代理通过反射机制,可在不修改原代码的情况下添加新的功能,应用于多种场景,简单.实用.灵活,是 java 开发必学知识,本文将对动态代理使用进行详细介绍. 1. 引言 最近开发 ...
- java在容器中导入图片_Java程序员必学技术:@Import直接导入类,在容器@Configuration、@Component中是怎么直接导入类注册到容器的?...
Java程序员必学技术:@Import直接导入类,在容器@Configuration.@Component中是怎么直接导入类注册到容器的? Spring IoC 容器是一个管理 Bean 的容器,在 ...
- Java虚拟机必学之四大知识要点,附学习资料
转载自 Java虚拟机必学之四大知识要点,附学习资料 作为一位 Java 程序员,在尽情享受 Java 虚拟机带来好处的同时,我们还应该去了解和思考"这些技术特性是如何实现的", ...
最新文章
- Facebook 开源了一整套重要的 Linux 内核组件与工具!
- 华为新系统鸿蒙升级平板名单,华为鸿蒙系统升级名单正式确认!全面替换安卓:流畅度比肩iOS...
- Intel 5400平台 芯片组
- 算法题10 最长等差序列问题
- 利用Vivado封装DCP文件基本流程
- 9102年,曝光这几个高质量的公众号,年薪7位数!
- Atiitt 自我学习法流程 1.预先阶段 1.1.目标搜索 资料搜索 1.2. 1.3.通过关联关键词 抽象 等领域 拓展拓宽体系树 1.4. 2.分析整理阶段 2.1.找出重点 压缩要学会
- 火星开发板_数据科学家来自火星,软件开发人员来自金星
- 主板 B85 + 核显HD4600 , EFI 安装黑苹果
- 用最优控制视角看微分几何下的测地线
- linux删除文件名的文件夹,Linux删除文件夹和修改文件名
- 机器学习sklearn-线性回归
- 项目管理知识体系指南(十)项目风险管理
- Ubuntu20.04连接校园网WiFi
- 为网站配置免费的HTTPS证书 4-4
- 卸载WPS后安装office,office文档图标显示异常的解决方法
- Ubuntu 18.04 run方式安装Cuda9.0 惠普Z6工作站
- 5个没有提到过的网络游戏植入案例
- 微博API接口的调用
- 【程序员猎奇】分享一个好东西给大家!
热门文章
- iOS使用一些特殊键盘时的运行错误解决Can't find keyplane that supports type 4 for keyboard
- 为何腾讯和阿里用LoRa,运营商用NB-loT?
- 编写SQL语句查询出每个各科班分数最高的同学的名字,班级名称,课程名称,分数...
- My life--Bill Clinton
- 全国计算机python考试难吗_计算机二级python考试难吗
- 使用zinnia库进行中文手写识别
- 重仓农业,巨头鏖战社区团购“广积粮”
- FilterDispatcher已被标注为过时解决办法 gt;gt;gt; FilterDispatcher lt;lt;lt; is deprecated!...
- CM+CDH安装搭建全过程(总结版)
- 刚刚入职新公司,千万不要因为自己的失误被开除