jquery arbitrary position floating fixed-layer plug-in usage example _jquery

This article illustrates the use of floating fixed-layer plug-ins in any location in jquery. Share to everyone for your reference. The specific analysis is as follows:

Note: You can let the specified layer float to any location on the page, it will remain unchanged at the current position when the scroll bar scrolls, and will not produce a flashing

2009-06-10 Modified: Re-modify the plug-in to achieve a fixed floating layer, using a large fixed layer to locate
2009-07-16 modified: Fixed IE6 problem with top

09-11-5 modification: When the absolute position of a custom layer is added, the decision to add a top to a null value
This method steals from the Tianya new page
After many tests, basically no bug~

Call:

1 NO parameter call: Default float in lower right corner

$ ("#id"). Floatdiv ();

2 Built-in fixed position float

Lower right corner  
$ ("#id"). Floatdiv ("Rightbottom");  
Lower left-hand corner  
$ ("#id"). Floatdiv ("Leftbottom");  
Lower right corner  
$ ("#id"). Floatdiv ("Rightbottom");  
Upper left-hand corner  
$ ("#id"). Floatdiv ("Lefttop");  
Upper right corner  
$ ("#id"). Floatdiv ("Righttop");  
Center  
$ ("#id"). Floatdiv ("Middle");  

Additional four new fixed location methods are added

Middletop (center top), Middlebottom (center low), Leftmiddle, Rightmiddle

3 Custom Position Float

$ ("#id"). Floatdiv ({left: ' 10px ', Top: "10px"});  
The above parameter, set the floating layer in the left 10 pixels, top 10 pixel position   

Jquery.fn.floatdiv=function (location) {//Judge browser version var Isie6=false;  
  var Sys = {};  
  var ua = Navigator.userAgent.toLowerCase ();  
  var s; (s = Ua.match (/msie) ([\d.] +)/)) ?  
  sys.ie = S[1]: 0;  
  if (sys.ie && sys.ie== "6.0") {isie6=true;  
    The high and wide/low of var windowwidth,windowheight;//window gets the high and wide if (self.innerheight) {Windowwidth=self.innerwidth of the window;  
  Windowheight=self.innerheight; }else if (document.documentelement&&document.documentelement.clientheight) {windowWidth=  
    Document.documentElement.clientWidth;  
  Windowheight=document.documentelement.clientheight;  
    else if (document.body) {windowwidth=document.body.clientwidth;  
  Windowheight=document.body.clientheight;  
    Return This.each (function () {The absolute location of the Var loc;//layer var wrap=$ ("<div></div>");  
    var top=-1; if (location==undefined | | location.constructor = = String) {switch (location) {case ("RightbottoM ")://Lower right corner loc={right:" 0px ", Bottom:" 0px "};  
        Break  
          Case ("Leftbottom")://Lower left corner loc={left: "0px", Bottom: "0px"};   
        Break  
          Case ("Lefttop")://upper left corner loc={left: "0px", Top: "0px"};  
          Top=0;  
        Break  
          Case ("Righttop")://upper right corner loc={right: "0px", Top: "0px"};  
          Top=0;  
        Break  
          Case ("Middletop")://Center loc={left:windowwidth/2-$ (This). Width ()/2+ "px", Top: "0px"};  
          Top=0;  
        Break  
          Case ("Middlebottom")://Center Low loc={left:windowwidth/2-$ (this). Width ()/2+ "px", Bottom: "0px"};  
        Break  
          Case ("Leftmiddle")://Left center loc={left: "0px", top:windowheight/2-$ (This). Height ()/2+ "px"};  
          top=windowheight/2-$ (This). Height ()/2;  
        Break  
          Case ("Rightmiddle")://Right Center loc={right: "0px", top:windowheight/2-$ (This). Height ()/2+ "px"}; top=windowheight/2-$ (this). HeiGht ()/2;  
        Break  
          Case ("Middle")://center Var l=0;//left Var t=0;//reside on l=windowwidth/2-$ (this). Width ()/2;  
          t=windowheight/2-$ (This). Height ()/2;  
          top=t;  
          loc={left:l+ "px", top:t+ "px"};  
        Break  
          default://defaults to the lower right corner of the location= "Rightbottom";  
          Loc={right: "0px", Bottom: "0px"};  
      Break  
      }}else{loc=location;  
      alert (Loc.bottom);  
      var str=loc.top;  
        09-11-5 modification: When the top is null, the judgment if (typeof (str)!= ' undefined ') {str=str.replace ("px", "");  
      TOP=STR; }/*fied IE6 css hack*/if (isIE6) {if (top>=0) {wrap=$ ("<div style=\"  
      Top:expression (documentelement.scrolltop+ "+top+"); \ "></div>"); }else{wrap=$ ("<div style=\" Top:expression (DOCUMENTELEMENT.SCROLLTOP+DOCUMENTELEMENT.CLIENTHEIGHT-THIS.OFFSE
 theight); \ "></div>");     } $ ("Body"). Append (wrap);  
    Wrap.css (Loc). CSS ({position: "fixed", Z_index: "999"});  
      if (isIE6) {wrap.css ("position", "absolute"); Without this, IE6 use expression will find the Beat phenomenon//As to why to add this, and why to add nothing.txt this, I do not know, hope to know the students can tell me $ ("body"). CSS ("background-  
    Attachment "," fixed "). CSS (" background-image "," url (n1othing.txt) ");  
  ///The layer to be fixed will be added to the fixed layer $ (this). Appendto (wrap);  
});

 };

Full instance code click here to download the site.

I hope this article will help you with your jquery programming.