滚动条超出表格标题，表格标题固定

Posted 2020-06-17

css：样式

#divTitle{padding:10px;position:relative;top:0px;width:93.5%; z-index:100; background-color:#6FA1D8;}

<div id="divTitle" style=" display:none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #6fa1d8; height: 24px;">
<td style="width:130px;">功能分类名称</td>
<td style="width:160px;">项目名称</td>
<td style="width:130px;">初始金额</td>
<td style="width:130px;">待审核金额</td>
<td style="width:90px;">可用金额</td>
<td style="width:90px;">实际发生金额</td>
<td style="width:90px;">使用百分比列</td>
</tr>
</table>
</div>

js 脚本

function menuFixed(id) {
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function() {
changePos(id, _getHeight);
}
}
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = $("#table_Collgrid").offset().top;
if (scrollTop+20 < height) {
obj.style.position = ‘relative‘;
obj.style.display = "none";
} else {
obj.style.position = ‘fixed‘;
obj.style.display = "";
}
}
window.onload = function() {
menuFixed(‘divTitle‘);
}