实现页面内多个表格在滚动时,表头浮动的效果(是同时多个表格哟)

1。为table 的表头所在的tr增加属性:
class="flowtitle"

2。增加样式表(可不添加任何样式):
.flowtitle{}

3。添加js脚本:
 1//标题栏的自动浮动效果
 2var oldTop = 0;
 3var trs; 
 4var arrTrs = new Array();
 5function onScroll()
 6{
 7    if(arrTrs && arrTrs.length > 0)
 8    {
 9        for(var i = 0; i < arrTrs.length; i++)
10        {    
11            var arr = arrTrs[i];
12            var top = (document.documentElement && document.documentElement.scrollTop) ? 
13                    document.documentElement.scrollTop : document.body.scrollTop; 
14            if( (top > arr[0].offsetTop || arr[1< arr[0].offsetTop) &&
15                top < arr[2])
16            {
17                arr[0].style.top = top;
18            }

19        }

20    }

21}

22function load ()
23{
24    //获取可浮动表头列表
25    var trs = document.getElementsByClassName("flowtitle");
26    if(trs && trs.length > 0)
27    {
28        for(var i = 0; i < trs.length; i++)
29        {
30            var tr = trs[i];
31            tr.style.position = "absolute";
32            var arr = new Array(2);
33            arr[0= tr;
34            arr[1= tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
35            arr[2= tr.offsetTop + tr.parentNode.offsetHeight;
36            arrTrs[i] = arr;
37        }

38    }

39}

40window.onscroll = onScroll;
41window.onload = load;


代码略解:
window.onscroll = onScroll;
window.onload = load;        //增加事件
load函数负责初始化可浮动表头对象的列表
load里面的:
   arr[0] = tr;    //表头对象
   arr[1] = tr.offsetTop;// 表头原始位置
   arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;//表格底部的位置
   tr.style.position = "absolute";//设置表头样式为浮动。 必须!否则不会有任何效果!
onScroll 里面负责处理滚动事件。
   if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
    top < arr[2])
   {
    arr[0].style.top = top;
   }
//上面这句最重要。判断条件 不明白的话,慢慢琢磨吧


ok,就这么简单。。但效果很酷酷的啦 

posted @ 2008-01-11 21:26  jacktu  阅读(4919)  评论(1编辑  收藏  举报