解决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" 即可.请使用偏移来定义何时切换元素的锁定和移动. ...
随机推荐
- (二)重拾单片机 第一天 LED灯
由图知道 低电平 亮,高电平 灭 控制第一个 LED1 亮灭程序代码,如下 #include<reg52.h> #define uchar8 unsigned char #define u ...
- nginx在windwos中的使用
本文章参考了 nginx for windows的介绍:http://nginx.org/en/docs/windows.html 你从官网上下载到的是一个 zip 格式的压缩包,首先要把压缩包解压. ...
- 161101、在Java中如何高效判断数组中是否包含某个元素
如何检查一个数组(无序)是否包含一个特定的值?这是一个在Java中经常用到的并且非常有用的操作.同时,这个问题在Stack Overflow中也是一个非常热门的问题.在投票比较高的几个答案中给出了几种 ...
- scala偏函数
package com.ming.test /** * 在Scala中,偏函数是具有类型PartialFunction[-T,+V]的一种函数.T是其接受的函数类型,V是其返回的结果类型. * 偏函数 ...
- html 关于块级元素和行内元素
常用的行内元素要记住:a.span.img.input.lable.select.strong.textarea 常用的块级元素要记住:div.h1~h6.dl.ul.ol 例如在一个title中,有 ...
- Pro ASP.NET MVC 5 Framework.学习笔记.6.3.MVC的必备工具
每个MVC程序员的军火库中,都有这三个工具:一个依赖注入(DI)容器,一个单元测试框架,一个模拟工具. 1.准备一个示例项目 创建一个ASP.NET MVC Web Application的Empty ...
- linux ll 命令各列的含义
linux ll 命令各列的含义:
- jQuery_Ajax_Json 异步接收PHP端传来的json数据
[json]{"user_id":"1172940","rmb_point":"0","weixin_id&q ...
- 有关对字符串的处理,需要用到List时的简化写法
这是项目中的需要根据ComputerName来获取IP的一个方法,如果出现多个ComputerName,需要将多个ComputerName的字符串以“:”分开,传进方法中,然后再处理不同的Name,然 ...
- HDU 5876:Sparse Graph(BFS)
http://acm.hdu.edu.cn/showproblem.php?pid=5876 Sparse Graph Problem Description In graph theory, t ...