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)的问题和使用时若干注意事项的更多相关文章

  1. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  2. 第二百四十九节,Bootstrap附加导航插件

    第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...

  3. 使用附加导航(affix)实现内容切换

    <!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...

  4. jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题

    1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...

  5. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  6. Bootstrap 附加导航(Affix)插件

    附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不 ...

  7. Bootstrap Affix(附加导航(Affix)插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

  8. Bootstrap-Plugin:附加导航(Affix)插件

    ylbtech-Bootstrap-Plugin:附加导航(Affix)插件 1.返回顶部 1. Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div&g ...

  9. 附加导航(Affix)行为

    用法 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. ...

随机推荐

  1. VPN服务器的配置与应用

      实验场景 通过将Linux配置VPN服务器允许远程计算机能够访问内网. 我的目的: 现在需要开发第三方接口,而第三方接口有服务器IP地址鉴权配置,这样在本地开发出来的程序每次都要发布到服务器上测试 ...

  2. Java参数按值传递?按引用传递

    有时候在想,java在调用方法时候究竟是按值传递还是按引用传递,之前有人说是基本数据类型按值传递,引用类型按引用传递.一时间,似乎都有道理. 笔者在此不追究字眼上的辨别识字能力,把自己对这个问题的理解 ...

  3. Java中的json数据类型操作

    package com.ss1.json; import java.util.ArrayList; import java.util.HashMap; import java.util.List; i ...

  4. 我使用的vim配置文件

    各种搜,拼凑出了这么一个配置文件,以下是文件的内容 syntax onfiletype onset linespace=0set rulerset nocompatibleset confirmset ...

  5. VS2010 断点无效肿么办?

    [1]分析原理: 1. 断点无效是因为目标文件和源文件的更新时间不一致, 编译器不认为当前的源文件是目标文件的当前版本. 2. IDE不会关心源文件的编码格式,能读入即可, 另存为Unicode或AS ...

  6. lamp环境编译错误

    GD 编译出错解决方法 编译最新的2.0.35版本,用默认的 ./configure编译 当make的时候,出现以下错误 configure.ac:64: error: possibly undefi ...

  7. iOS 学习笔记 五 (2015.03.17)使用storyBoard进行tableview的跳转

    方法一: 点击tableviewCell后,按住ctrl键拖拽至想要跳转的新的界面.这样跳转的结果是,点击tableview中的任何一行都会跳转到新的界面.可以通过控制cell的 属性 userInt ...

  8. 颜色表及html代码

    颜色名称及色样表(HTML版)   颜色名 中文名称 Hex RGB 十进制 Decimal     LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FF ...

  9. tomcat监控脚本

    工作所需,匆匆忙忙写了个监控tomcat的shell脚本,大概思路是这样的:先检测tomcat进程是否存在,如果不存在就启动,如果进程存在,检测页面返回码状态,如果是200就是正常,如果不是就重启. ...

  10. java网络编程之TCP通讯

    java中的网络编程之TCP协议的详细介绍,以及如何使用,同时我在下面举2例说明如何搭配IO流进行操作, /* *TCP *建立连接,形成传输数据的通道: *在连接中进行大数据量传输: *通过三次握手 ...