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，就這么簡單。。但效果很酷酷的啦?

總結

以上是生活随笔為你收集整理的实现页面内多个表格在滚动时，表头浮动的效果（是同时多个表格哟）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。