实现页面内多个表格在滚动时,表头浮动的效果(是同时多个表格哟)
1。为table 的表头所在的tr增加属性:
 class="flowtitle"
class="flowtitle"
2。增加样式表(可不添加任何样式): .flowtitle{}
.flowtitle{}
3。添加js脚本:
代码略解:
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,就这么简单。。但效果很酷酷的啦
 class="flowtitle"
class="flowtitle"2。增加样式表(可不添加任何样式):
 .flowtitle{}
.flowtitle{}3。添加js脚本:
 1 //标题栏的自动浮动效果
//标题栏的自动浮动效果
2 var oldTop = 0;
var oldTop = 0;
3 var trs;
var trs; 
4 var arrTrs = new Array();
var arrTrs = new Array();
5 function onScroll()
function onScroll()
6 {
{
7 if(arrTrs && arrTrs.length > 0)
    if(arrTrs && arrTrs.length > 0)
8 {
    {
9 for(var i = 0; i < arrTrs.length; i++)
        for(var i = 0; i < arrTrs.length; i++)
10 {
        {    
11 var arr = arrTrs[i];
            var arr = arrTrs[i];
12 var top = (document.documentElement && document.documentElement.scrollTop) ?
            var top = (document.documentElement && document.documentElement.scrollTop) ? 
13 document.documentElement.scrollTop : document.body.scrollTop;
                    document.documentElement.scrollTop : document.body.scrollTop; 
14 if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
            if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
15 top < arr[2])
                top < arr[2])
16 {
            {
17 arr[0].style.top = top;
                arr[0].style.top = top;
18 }
            }
19 }
        }
20 }
    }
21 }
}
22 function load ()
function load ()
23 {
{
24 //获取可浮动表头列表
    //获取可浮动表头列表
25 var trs = document.getElementsByClassName("flowtitle");
    var trs = document.getElementsByClassName("flowtitle");
26 if(trs && trs.length > 0)
    if(trs && trs.length > 0)
27 {
    {
28 for(var i = 0; i < trs.length; i++)
        for(var i = 0; i < trs.length; i++)
29 {
        {
30 var tr = trs[i];
            var tr = trs[i];
31 tr.style.position = "absolute";
            tr.style.position = "absolute";
32 var arr = new Array(2);
            var arr = new Array(2);
33 arr[0] = tr;
            arr[0] = tr;
34 arr[1] = tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
            arr[1] = tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
35 arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;
            arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;
36 arrTrs[i] = arr;
            arrTrs[i] = arr;
37 }
        }
38 }
    }
39 }
}
40 window.onscroll = onScroll;
window.onscroll = onScroll;
41 window.onload = load;
window.onload = load;
 //标题栏的自动浮动效果
//标题栏的自动浮动效果2
 var oldTop = 0;
var oldTop = 0;3
 var trs;
var trs; 4
 var arrTrs = new Array();
var arrTrs = new Array();5
 function onScroll()
function onScroll()6
 {
{7
 if(arrTrs && arrTrs.length > 0)
    if(arrTrs && arrTrs.length > 0)8
 {
    {9
 for(var i = 0; i < arrTrs.length; i++)
        for(var i = 0; i < arrTrs.length; i++)10
 {
        {    11
 var arr = arrTrs[i];
            var arr = arrTrs[i];12
 var top = (document.documentElement && document.documentElement.scrollTop) ?
            var top = (document.documentElement && document.documentElement.scrollTop) ? 13
 document.documentElement.scrollTop : document.body.scrollTop;
                    document.documentElement.scrollTop : document.body.scrollTop; 14
 if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
            if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&15
 top < arr[2])
                top < arr[2])16
 {
            {17
 arr[0].style.top = top;
                arr[0].style.top = top;18
 }
            }19
 }
        }20
 }
    }21
 }
}22
 function load ()
function load ()23
 {
{24
 //获取可浮动表头列表
    //获取可浮动表头列表25
 var trs = document.getElementsByClassName("flowtitle");
    var trs = document.getElementsByClassName("flowtitle");26
 if(trs && trs.length > 0)
    if(trs && trs.length > 0)27
 {
    {28
 for(var i = 0; i < trs.length; i++)
        for(var i = 0; i < trs.length; i++)29
 {
        {30
 var tr = trs[i];
            var tr = trs[i];31
 tr.style.position = "absolute";
            tr.style.position = "absolute";32
 var arr = new Array(2);
            var arr = new Array(2);33
 arr[0] = tr;
            arr[0] = tr;34
 arr[1] = tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
            arr[1] = tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);35
 arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;
            arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;36
 arrTrs[i] = arr;
            arrTrs[i] = arr;37
 }
        }38
 }
    }39
 }
}40
 window.onscroll = onScroll;
window.onscroll = onScroll;41
 window.onload = load;
window.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,就这么简单。。但效果很酷酷的啦
 
                    
                     
                    
                 
                    
                
 }
} 
     
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号