CapacityFixed is a jquery-based positioning box similar to Sina Weibo's new message prompts.

In the company's project requirements, there is a positioning box similar to the Sina Weibo message prompts. For more information, see. :

When the browser is rolling, when the browser needs to float the layer to remove the browser interface view area, modify its position attribute so that it can be displayed along the top edge of the window, position: fixed, you can perform smooth and fixed positioning on the floating layer in IE7 + and other browsers. Because IE6's predecessors do not support the fixed attribute, use the position: absolute attribute instead to recalculate the top value.
The Code is as follows:
HTML code:

The Code is as follows:

1 New private message, view private message

View 10 new messages

108 new fans, view fans

Close

CSS 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 ,. 2);-webkit-box-shadow: 1px 1px 2px rgba (0, 0 ,. 2); box-shadow: 1px 1px 2px rgba (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:

The Code is as follows:

/**
* @ Author Yuen Wharf
* Similar to the positioning box of Sina Weibo message prompts
* 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, // locate the right side of the page relative to the page width
Top: 100,
PageWidth: 960
};
}) (JQuery );