【Javascript】クロスブラウザを制する Part 2　2-7 レイヤーの位置固定

<script language="JavaScript">
<!--


  /*//////////////// レイヤ－位置固定用指定用関数  UseFree
  ========================================================
  スクロールしてもレイヤ－の位置が動かないように固定する
  --------------------------------------------------------
   Win  n4 n6 moz e4 e5 e6,
   Mac  n4 n6 moz e4.5 e5,
   Linux n4 n6 moz
  ========================================================
  更新履歴 
  2002.6.10 -- N4バグ修正
  2002.2.1  -- Win Oprea6に対応

  ◎使用例
  fixedLAYER('レイヤ－名',位置,offSetX,offSetY) 

  ◎引数解説
  レイヤ－名: 固定するレイヤー名 
  位置      : (固定するレイヤーの位置をあらわす文字)
              rightTop   右上    rightBottom  右下
              leftBottom 左下    leftTop      左上
              center     中央    * デフォルトはleftTop
  offSetX   : 最寄りの辺(または中心)からのpx距離 水平方向
  offSetY   : 最寄りの辺(または中心)からのpx距離 垂直方向

  Support http://game.gr.jp/js/
  ======================================================*/

  function startFixed(){

    /*このstartFixed()関数内へ固定したいレイヤー名などを
      引数へ書いたfixedLAYER()関数をならべてください。  */

      fixedLAYER('fixedLay0','center',40,-40)

  }

  /* -- ここから下はさわらなくてもOK -- */

  var ie= !!document.all
  var n4= !!document.layers
  var w3c=!!document.getElementById
  var mac45 
    = navigator.userAgent.indexOf('MSIE 4.5; Mac_PowerPC')

  if(document.layers)window.onresize=resizeFunc
  function resizeFunc(e){location.reload()}

  function iniFunc(){
    if(ie&&!(mac45!=-1))window.onscroll = startFixed
    startFixed()
  }

  var tid=new Array()

  function fixedLAYER(layName,posString,offSetX,offSetY){

    offSetX = parseInt(offSetX,10)
    offSetY = parseInt(offSetY,10)

    if( posString == 'rightTop' ){
     
      if(ie) offLeft = document.body.clientWidth   + offSetX
      else   offLeft = window.innerWidth           + offSetX
      if(ie) offTop  =                               offSetY
      else   offTop  =                               offSetY

    }
    else if( posString == 'rightBottom' ){

      if(ie) offLeft = document.body.clientWidth   + offSetX
      else   offLeft = window.innerWidth           + offSetX
      if(ie) offTop  = document.body.clientHeight  + offSetY
      else   offTop  = window.innerHeight          + offSetY

    }
    else if( posString == 'leftBottom' ){

      if(ie) offLeft =                               offSetX
      else   offLeft =                               offSetX
      if(ie) offTop  = document.body.clientHeight  + offSetY
      else   offTop  = window.innerHeight          + offSetY

    }
    else if( posString == 'center' ){

      if(ie) offLeft = document.body.clientWidth/2 + offSetX
      else   offLeft = window.innerWidth/2         + offSetX
      if(ie) offTop  = document.body.clientHeight/2+ offSetY
      else   offTop  = window.innerHeight/2        + offSetY

    }
    else {

      if(ie) offLeft =                               offSetX
      else   offLeft =                               offSetX
      if(ie) offTop  =                               offSetY
      else   offTop  =                               offSetY

    }

    offLeft = parseInt(offLeft)
    offTop  = parseInt(offTop)

    if(document.all){
      var mx = parseInt(document.body.scrollLeft +offLeft)
      var my = parseInt(document.body.scrollTop  +offTop)
    } else {
      var mx = parseInt(self.pageXOffset+offLeft)
      var my = parseInt(self.pageYOffset+offTop)

    }

    moveLAYER(layName,mx,my)

    //WinIE以外 opera n4用
    if(!(ie&&!mac45) || opr){
      clearTimeout(fixedLAYER[layName])
      fixedLAYER[layName]=setTimeout("fixedLAYER('"+layName+"','"+posString
                   +"','" +offSetX+"','"+offSetY+"')",100)
    }
  }

  function moveLAYER(layName,x,y){
      
      if(document.getElementById){         //Moz,NN6,IE5用
        document.getElementById(layName).style.left=x
        document.getElementById(layName).style.top=y
      }
      else if(document.all){
        document.all(layName).style.pixelLeft=x    //IE4用
        document.all(layName).style.pixelTop=y
      }
      else if(document.layers)
        document.layers[layName].moveTo(x,y)
                                                   //NN4用
  }

  /*////////////// レイヤ－位置固定用指定用関数ここまで */

//-->
</script>

<style type="text/css">
<!--

div.fixedLay 
{ 
    position         : absolute   ;
    z-index          : 100        ;
    left             : -200px     ;
    top              : -200px     ; 
}

a.fixedLay   
{ 
    text-decoration  : none       ;
    font-size        : 12px       ;
    font-weight      : bold       ;
    font-family      : Arial      ;
    color            : #222222    ; 
}

-->
</style>

<body onload="iniFunc()">

<!--↓これらのレイヤ－の位置が固定されます-->

<div id="fixedLay0" 
     class="fixedLay">


  <a   href   = "http://xxx.xxx/" 
       target = "a"
       class  = "fixedLay">/////C O N T E N T S/////</a>
  <br>
  <a   href   = "http://xxx.xxx/" 
       target = "a"
       class  = "fixedLay">2-6 背景色set</a>
  <br>
  <a   href   = "http://xxx.xxx/" 
       target = "a"
       class  = "fixedLay">2-5 奥行きZ座標set </a>
  <br>
  <a   href   = "http://xxx.xxx/" 
       target = "a"
       class  = "fixedLay">2-3 HTML出力</a>
  <br>
  <a   href   = "http://xxx.xxx/" 
       target = "a"
       class  = "fixedLay">2-2 位置/移動(3) </a>
</div>