实现页面内多个表格在滚动时,表头浮动的效果(是同时多个表格哟)
1。为table 的表头所在的tr增加属性:
class="flowtitle"
2。增加样式表(可不添加任何样式):
.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,就这么简单。。但效果很酷酷的啦
![](/Images/OutliningIndicators/None.gif)
2。增加样式表(可不添加任何样式):
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3。添加js脚本:
1
//标题栏的自动浮动效果
2
var oldTop = 0;
3
var trs;
4
var arrTrs = new Array();
5
function 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
}
22
function 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
}
40
window.onscroll = onScroll;
41
window.onload = load;
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
38
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
39
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
40
![](/Images/OutliningIndicators/None.gif)
41
![](/Images/OutliningIndicators/None.gif)
代码略解:
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,就这么简单。。但效果很酷酷的啦