打包插件经典应用 capacityFixed-类似于新浪微博新消息提示的定位框
封装插件经典应用 capacityFixed-类似于新浪微博新消息提示的定位框
当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。
具体代码如下：
06 |
(function($){
|
07 |
$.fn.capacityFixed = function(options) {
|
08 |
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
|
09 |
|
10 |
var FixedFun = function(element) {
|
11 |
var top = opts.top;
|
12 |
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
|
13 |
element.css({
|
14 |
"right":right,
|
15 |
"top":top
|
16 |
});
|
17 |
$(window).resize(function(){
|
18 |
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
|
19 |
element.css({
|
20 |
"right":right
|
21 |
});
|
22 |
});
|
23 |
$(window).scroll(function() {
|
24 |
var scrolls = $(this).scrollTop();
|
25 |
if (scrolls > top) {
|
26 |
|
27 |
if (window.XMLHttpRequest) {
|
28 |
element.css({
|
29 |
position: "fixed",
|
30 |
top: 0
|
31 |
});
|
32 |
} else {
|
33 |
element.css({
|
34 |
top: scrolls
|
35 |
});
|
36 |
}
|
37 |
}else {
|
38 |
element.css({
|
39 |
position: "absolute",
|
40 |
top: top
|
41 |
});
|
42 |
}
|
43 |
});
|
44 |
element.find(".close-ico").click(function(event){
|
45 |
element.remove();
|
46 |
event.preventDefault();
|
47 |
})
|
48 |
};
|
49 |
return $(this).each(function() {
|
50 |
FixedFun($(this));
|
51 |
});
|
52 |
};
|
53 |
$.fn.capacityFixed.deflunt={
|
54 |
right : 100,//相对于页面宽度的右边定位
|
55 |
top:100,
|
56 |
pageWidth : 960
|
57 |
};
|
58 |
})(jQuery) |
调用：
1 |
$("#float").capacityFixed({
|
2 |
right : 100,//相对于页面宽度的右边定位
|
3 |
top:100,
|
4 |
pageWidth : 960
|
5 |
}); |