Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2445498
  • 博文数量: 328
  • 博客积分: 4302
  • 博客等级: 上校
  • 技术积分: 5486
  • 用 户 组: 普通用户
  • 注册时间: 2010-07-01 11:14
个人简介

悲剧,绝对的悲剧,悲剧中的悲剧。

文章分类

全部博文(328)

文章存档

2017年(6)

2016年(18)

2015年(28)

2014年(73)

2013年(62)

2012年(58)

2011年(55)

2010年(28)

分类: Html/Css

2014-02-26 16:14:51

bootstrap-affix.js组件,直译过来就是固定,典型的应用就是导航,即当页面内容过多出现滚动条时的浮动导航,如官网页面的左侧导航(下图)。其实这组件很简单,就是通过检测滚动位置来动态的添加或移除 affix 、 affix-top 、 affix-bottom 三个样式,来使导航仍然处在一个合适的位置。当采用标记法,页面加载完毕时,JS插件会搜索页面上所有[data-spy="affix"]的元素,然后找其data-offset-top或data-offset-bottom属性,即离页面顶(底)部少于多少px,然后添加或移除上面的三个样式。

CSS定义


首先看一下css定义,这里需要注意的是,官方的bootstrap.css 文件里面没有定义bottom样式,需要开发者自己定义。
  1. .affix {
  2.   top: 40px;
  3. }

  4. .affix-bottom {
  5.   position: absolute;
  6.   top: auto;
  7.   bottom: 270px;
  8. }

如何使用


和其他bootstrap插件一样也有俩种设置方法。

HTML data方式

添加附加导航单, 只需把 data-spy="affix" 添加到你想监视的元素上. 然后使用偏移量来确定一个元素的开和关.
...

使用JavaScript

$('#navbar').affix()

问题


实施之后发现,导航列表抖动的很明显,而网上介绍的设置body样式的方法也没有作用。
$('body').css('position','relative');

无奈参考了官网定时器的方法,搞定
  1.     setTimeout(function () {
  2.       $('#my_tabs').affix({
  3.         offset: {
  4.           top: function () { return $(window).width() <= 980 ? 290 : 210 }
  5.         , bottom: 270
  6.         }
  7.       })
  8.     }, 100);

阅读(5525) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~