您的位置:首页 > 其它

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

2008-01-11 21:26 387 查看
1。为table 的表头所在的tr增加属性:
class="flowtitle"

2。增加样式表(可不添加任何样式):
//标题栏的自动浮动效果

2var oldTop = 0;

3var trs;

4var arrTrs = new Array();

5function onScroll()

6function load ()

23window.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,就这么简单。。但效果很酷酷的啦
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: