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. Fresco源码解析 - DataSource怎样存储数据

    Fresco源码解析 - DataSource怎样存储数据 datasource是一个独立的 package,与FB导入的guava包都在同一个工程内 - fbcore. datasource的类关系 ...

  2. Android异步任务AsyncTask

    package com.example.asynctask; import java.net.MalformedURLException; import java.net.URL; import an ...

  3. 访问网页时提示的503错误信息在IIS中怎么设置

    访问网页时提示的503错误信息在IIS中怎么设置 503是一种常见的HTTP状态码,出现此提示信息的原因是由于临时的服务器维护或者过载,服务器当前无法处理请求则导致了访问网页时出现了503错误.那么当 ...

  4. js 获取选中的多选框

    前台html <span class="spbox"> <input type="checkbox" name="category& ...

  5. 【NOIP模拟赛】正方形大阵

    正方形大阵 [问题描述]   [输入格式]   第一行一个正整数n代表询问次数. 接下来n行每行一个不超过八位的小数k代表一组询问. [输出格式]   输出共n行,代表每次询问的答案:如果有无数个交点 ...

  6. Elasticsearch多索引

     在Elasticsearch中,一般的查询都支持多索引.只有文档API或者别名API等不支持多索引操作,因此本篇就翻译一下多索引相关的内容. 首先,先插入几条数据: $ curl -XPOST lo ...

  7. Ul li 竖排 菜单

    Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. 忘记 oracle11g 的 sys 密码的处理

    方法1: 利用oracle 的本地用户信任方式登录,修改sys密码,具体如下: 1.检查 oracle 的network/admin 下的 sqlnet.ora 文件内, 存在 SQLNET.AUTH ...

  9. Backup: Flow Control in Perl6

    Control Flow 注意空格,注意空格,注意空格 和 Perl5不同的是,这些结构都可以返回值,而且即使倒置结构也可以用 block 了 block 可以有逗号 with without orw ...

  10. Linux 下多核CPU知识【转】

    转自:http://www.cnblogs.com/dongzhiquan/archive/2012/02/16/2354977.html 1. 在Linux下,如何确认是多核或多CPU: #cat ...