[转]随滚动条滚动的层(支持IE6,FF2)

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 未命名頁面 </ title >
     < meta  HTTP-EQUIV ="Content-Type"  content ="text/html; charset=utf-8"   />
     < style >
.xScrollStick{}{
    position:absolute;
    padding:15px;
    border:1px solid black;
    width:120px;
    height:24px;
}
</ style >
< script  language ="javascript" >
//<![CDATA[
//********************/
//  x 系列之 xScrollStick
//  作者：Hutia
//  未经同意不得转载或用于商业用途
//********************/
/**//*
说明：
  x系列是Hutia开发的系列JS代码，配合相应的css后可以实现快速的自定义标签
  目前xScrollStick支持的浏览器类型为：IE5.5, FF1.5
  xScrollStick的标签为
      <div class="xScrollStick">
          Content
      </div>
  
  支持属性：
    无
  支持方法：
    无
*/
//**载入CSS***** spcssxframe.css
var xScrollStickCssFilePath="sp\/css\/xframe.css";
//document.write("<style>@import url("+xScrollStickCssFilePath+");</style>");
//**检测浏览器种类*****
var BROWSERNAME="";
switch(navigator.appName.toLowerCase()){
    case "netscape":
        BROWSERNAME="ns";
    break;
    case "microsoft internet explorer":
    default:
        BROWSERNAME="ie";
    break;
}
//**设置初始化事件******
switch(BROWSERNAME){
    case "ns":
        window.addEventListener("load",_xScrollStick_init,false);
    break;
    case "ie":
    default:
        window.attachEvent("onload",_xScrollStick_init);
}
//**初始化函数******
function _xScrollStick_init(){
    var allTheScrollSticks=document.getElementsByTagName("div");
    for(var i=0;i<allTheScrollSticks.length;i++){
        if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))_xScrollStick_event_doInit(allTheScrollSticks[i]);
    }
    window_event_scroll();
}
//**事件响应函数区******
function _xScrollStick_event_doInit(element){
    //初始化变量
    element.offX=element.offsetLeft;
    element.offY=element.offsetTop;
    
    //设置方法
    element.Stick=_xScrollStick_method_Stick;
    
    //设置事件
    switch(BROWSERNAME){
        case "ns":
            window.addEventListener("scroll",window_event_scroll,false);
        break;
        case "ie":
        default:
            window.attachEvent("onscroll",window_event_scroll);
    }
    
    //获取设置
    //无
    document.body.parentNode.onscroll=window_event_scroll;
}
function window_event_scroll(){
    var allTheScrollSticks=document.getElementsByTagName("div");
    for(var i=0;i<allTheScrollSticks.length;i++){
        if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))try{allTheScrollSticks[i].Stick();}catch(e){}
    }
}
//**方法函数区******
function _xScrollStick_method_Stick(){
    var x=this.offX, y=this.offY, po=this;
    this.style.position="absolute";
    x+=document.body.parentNode.scrollLeft;
    y+=document.body.parentNode.scrollTop;
    this.style.left=x+"px";
    this.style.top=y+"px";
    
}
//**通用函数区***
//无
//]]>
</ script >
</ head >

< body >
< div  class ="xScrollStick"  style ="left:0px;top:0px" >
    Content..
</ div >
< div  style ="top:0px;width:400px;height:2000px; padding-left:80px;" >
afosdhfosdhg < br >
afosdhfosdhg < br > afosdhfosdhg < br >
afosdhfosdhg < br > afosdhfosdhg < br >
afosdhfosdhg < br > afosdhfosdhg < br >
afosdhfosdhg < br > afosdhfosdhg < br >
afosdhfosdhg < br > afosdhfosdhg < br >
afosdhfosdhg < br >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/alanliu/archive/2008/07/21/1247724.html