解决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" 即可.请使用偏移来定义何时切换元素的锁定和移动. ...
随机推荐
- CSS_03_01_CSS组合选择器
CSS组合选择器 第01步:创建css:with.css @charset "utf-8"; /* 组合选择器,用","隔开 */ .a,.b,div span ...
- paper 6:支持向量机系列三:Kernel —— 介绍核方法,并由此将支持向量机推广到非线性的情况。
前面我们介绍了线性情况下的支持向量机,它通过寻找一个线性的超平面来达到对数据进行分类的目的.不过,由于是线性方法,所以对非线性的数据就没有办法处理了.例如图中的两类数据,分别分布为两个圆圈的形状,不论 ...
- js 获取select 中option 的个数
//document.writeln(document.getElementById("sel").options.length); //document.writeln(docu ...
- libSVM 简易使用手册
关于SVM的基础理论知识,可以google这篇文章<SVM的八股简介>,讲解得生动有趣,是入门的极好教材.作为拿来主义者,我更关心怎么用SVM,因此瞄上了台湾林智仁教授提供的libSVM. ...
- 3. 星际争霸之php设计模式--简单工厂模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- LoadRunner11下载以及详细破解说明【最新】
Loadrunner11破解所需两个dll文件以及自动删除注册表工具,使用方法见附件readme.也可安装网上的办法,手动删除注册表项. 下载破解文件lm70.dll和mlr5lprg.dll lm7 ...
- [置顶] Jquery学习总结(二) jquery选择器详解
1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...
- python logging 替代print 输出内容到控制台和重定向到文件
转自:http://blog.csdn.net/z_johnny/article/details/50740528
- 【jqGrid for ASP.NET MVC Documentation】.学习笔记.6.分层
1 两级分层 每个父 grid 的行,都能有子 grid .这被叫做 层次,它用来显示相关的 表,主信息 –> 明细信息等. } 一旦你为 父子 grid 都定义了 Models ,下一步就是设 ...
- Mysql slow query log
一.概念部分: 顾名思义,慢查询日志中记录的是执行时间较长的query,也就是我们常说的slow query,通过设--log-slow-queries[=file_name]来打开该功能并设置记录 ...