capacityFixed Positioning box similar to Sina Weibo new message prompt based on jquery_jquery

Rendering:

When the browser scrolls, if you want a floating layer to be removed from the browser interface viewport, just modify its position attribute so that it floats and displays on the upper edge of the window. , position: fixed, can smoothly and fixedly position the floating layer under IE7 and other browsers. Since IE6 predecessors do not support the fixed attribute, use the position: absolute attribute instead to recalculate the top value.
The specific code is as follows:
HTML code:

Copy code The code is as follows:

1 new private message, View private messages

10 new messages, View message

108 new fans,

Close

CSS code:

Copy code The code is as follows:

.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba( 0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2) ; position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico{ position:absolute; top:5px; right: 5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; }
.float .close-ico :hover{ background-position:0 -16px;}
.float p{ line-height:22px}

JS code:

Copy code The code is as follows:

/**
* @author Fool's Pier
* A positioning box similar to Sina Weibo's new message prompt
* More
*/
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

var FixedFun = function(element) {
var top = opts.top;
var right = ($(window).width()-opts.pageWidth)/2 opts.right;
element.css({
"right":right,
"top":top
});
$(window).resize(function(){
var right = ($(window).width()-opts.pageWidth)/2 opts.right ;
element.css({
"right":right
});
});
$(window).scroll(function() {
var scrolls = $ (this).scrollTop();
if (scrolls > top) {

if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico") .click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 100,//Right relative to the page width Positioning
top:100,
pageWidth : 960
};
})(jQuery);