封装插件经典应用 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

});