电容固定基于框架的类似于新浪微博新消息提示的定位框

效果图：

当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其位置属性，让其浮动在窗口的上沿显示就可以了，位置：固定，可以在IE7和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持固定的；不变的属性，使用位置：绝对属性代替，重新计算顶端值。具体代码如下：HTML代码：复制代码代码如下： div class=' float ' id=' float ' p id=' WB _ unread _ msg _ 1303891276971 ' 1条新私信，a href='//www.jb51.net/'查看私信/a/p p id=' WB _ unread _ msg _ 1303891276972 ' 10条新消息，a href='//www.jb51.net/'查看消息/a/p p id=' WB _ unread _ msg _ 1303891276973 ' 108个新粉丝，a href='//www.jb51.net/'查看粉丝/a/p a href='#' title='关闭id=' class=' close-ico '关闭/a /div CSS代码：复制代码代码如下：float { width :200 pxpadding :5 px 10pxborder :1 px实心# ffec B0 font-size :12 px；背景-color : # fffee 0；-moz-box-shadow :1 px 1px 2px rgba(0，0，0，2);-web套件-box-shadow :1 px 1px 2px rgba(0，0，0，2);box-shadow:1px 1px 2px rgba(0，0，0，2);位置：绝对；-moz-边界-半径：5 px-web套件-边框-半径：5 px边界半径：5像素；} .漂浮close-ico {位置：绝对值；top:5pxright:5px显示：块；宽度：16 px高度：16像素背景-image : URL(img/close-ico。巴布亚新几内亚)；文本缩进：-900像素；飞越：隐藏；} .漂浮关闭-ico :悬停{背景-位置：0-16px；} .浮动p{ line-height:22px} JS代码：复制代码代码如下：/* * * @作者愚人码头* 类似于新浪微博新消息提示的定位框* 更多*/(函数($){ $ .fn。capacity fixed=function(options){ var opts=$ .extend({}，$。fn。电容固定。flunt，选项)；var固定fun=函数(元素){ var top=opts。顶部；var right=($(窗口)。width()-opts。页面宽度)/2个选项。右；element.css({ 'right':right，' top ' : top })；$(窗口)。调整大小（函数(){ var right=($(window)).width()-opts。页面宽度)/2个选项。右；元素。CSS({ '右' :右})；});$(窗口)。卷轴(函数(){ var scrolls=$(this)).滚动顶部()；如果(向上滚动){ if(窗口. XMLHttpRequest){元素。CSS({位置： '固定'，顶部： 0 })；} else { element。CSS({ top :卷轴})；} } else { element。CSS({位置： '绝对'，top : top })；} });element.find(' .close-ico ').click(function(event){ element。移除()；事件。prevent default()；}) };返回$(这个)。每个（函数(){ FixedFun($(this))；});};$ .fn。电容固定。flunt={ right : 100，//相对于页面宽度的右边定位top:100，页面宽度： 960 }；})(jQuery)；