解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项
1、要清楚Affix分别赋予的class,
开始:affix-top
达到top参数:affix
达到bottom参数:affix-bottom
2、一定要自定义这些class,否则 插件会默认给你在达到bottom参数时加上relative,会严重影响bottom参数时的样式。
3、样式没有特殊需求的话:affix-top 为默认流 、affix为fixed、affix-bottom为absolute。
4、浮动的容器和屏幕上边沿的间距(如果想留一点的话)用css的top控制,不要用padding等,否则会出现跳动。
5、浮动容器和滚动容器(一般是body)之间的容器不要有relative等定位。
6、一般不要忽略bottom参数,否则在浮动容器高度高于浏览器高度时会出问题。
7、加句:
setTimeout(function(){
$('...').affix();
});
能纠正刷新后或浏览器大小变化时出现的对齐问题。
顺便吐槽下那个stickUp插件,真难用!!!!!
本$文$来$自$博$客$园 fej121!!!
解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项的更多相关文章
- Bootstrap 附加导航(Affix)插件
bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写
- 第二百四十九节,Bootstrap附加导航插件
第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...
- 使用附加导航(affix)实现内容切换
<!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...
- jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题
1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...
- bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...
- Bootstrap 附加导航(Affix)插件
附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不 ...
- Bootstrap Affix(附加导航(Affix)插件的用法)
原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...
- Bootstrap-Plugin:附加导航(Affix)插件
ylbtech-Bootstrap-Plugin:附加导航(Affix)插件 1.返回顶部 1. Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div&g ...
- 附加导航(Affix)行为
用法 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. ...
随机推荐
- SQL Server面试题
前几天在博客园上看到一道SQL面试题,sc是表名.老师拿来与同学分享,让大家试做,要求是:查出每科成绩都>=80分的名字,看能写出几种方法.没有主外键,没有关联,脑袋一下子就蒙了.经老师讲解指导 ...
- Android 沉浸式状态栏
1,传统的手机状态栏是呈现出黑色或者白色条状的,有的和手机主界面有很明显的区别.这样就在一定程度上牺牲了视觉宽度,界面面积变小.看一下QQ的应用 2,实现起来也挺简单的,来一起看一下吧 MainAct ...
- react 绑定事件
1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的j ...
- json和字符串/数组/集合的互相转换の神操作总结
一:前端字符串转JSON的4种方式 1,eval方式解析,恐怕这是最早的解析方式了. function strToJson(str){ var json = eval('(' + str + ')') ...
- linux添加字体的过程
只说一下过程, 至于具体的原理还没搞明白. 1. 首先你要有字体文件,ttf或者ttc格式的均可以 我们可以从windows的 C:\WINDOWS\Fonts\ 这个目录下的字体文件复制出来,例如我 ...
- MySQL函数汇总
前言 MySQL提供了众多功能强大.方便易用的函数,使用这些函数,可以极大地提高用户对于数据库的管理效率,从而更加灵活地满足不同用户的需求.本文将MySQL的函数分类并汇总,以便以后用到的时候可以随时 ...
- 《HTML5高级程序设计》知识点概要(不涉及详细语法)
不断更新. 说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息. 一.CANVAS: 检测: try{ document.createElement("canvas&qu ...
- Jetty 嵌入式开发(实例)
我尝试了jetty几个版本,类的使用有些差异,在此记录下jettyVersion = 9.0.2.v20130417 的部分实例 maven 依赖及配置: <properties> < ...
- 1. python中的随机函数
本系列不会对python语法,理论作详细说明:所以不是一个学习教材:详细查考Vamei 大神:通俗易懂:是一个很好(基础-中级-高级)的学习教程.而这里只是我一个学习python的某些专题的 ...
- Asp.net Vnext Filters
ASP.NET MVC 提供Filters(筛选器)之前或之后调用操作方法执行筛选逻辑,和AOP面向切面编程一样. 本文已经同步到<Asp.net Vnext 系列教程 >中] 本章主要介 ...