tabel thead 滑动固定顶部

试了几种方法，还是 translateY 比较靠谱

 

// 固定头部  放弃ie
var thead_top = $('thead').offset().top;
$(window).scroll(function() {
var sctop = $(this).scrollTop();
if(sctop > 60){
var ty = sctop - thead_top;
thead.css({'transform':'translateY('+ ty +'px)'});
} else{
thead.css({'transform':'translateY(0px)'});
}
})

二、   asp.net  DataGrid

window.onload = function () {
//复制表头 放在thead
var dg = document.getElementById('viewGrid');

var tableHead = dg.createTHead();

tableHead.id = "fixedHeader";

tableHead.appendChild(dg.rows[0].cloneNode(true))
//设置thead 浮动相当于固定头部
var tableCont = document.querySelector('#table-cont');
function scrollHandle(e) {
console.log(this);
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}

tableCont.addEventListener('scroll', scrollHandle);
};

 

<div class="grid main-grid grid-alter" id="table-cont">
<asp:DataGrid ID="viewGrid" runat="server" OnItemDataBound="viewGrid_ItemDataBound">
<Columns>
<asp:BoundColumn DataField="pa00101" HeaderText="项目ID" ItemStyle-HorizontalAlign="Center" Visible="False"></asp:BoundColumn>
<asp:BoundColumn DataField="pa00102" HeaderText="项目名称"></asp:BoundColumn>

<asp:BoundColumn DataField="fileA" HeaderText="总包施工单位"></asp:BoundColumn>
<asp:BoundColumn DataField="fileB" HeaderText="设计单位"></asp:BoundColumn>
<asp:BoundColumn DataField="fileC" HeaderText="监理单位"></asp:BoundColumn>

<asp:BoundColumn DataField="" HeaderText="可研编制单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="可研评估单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="概算编制单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="概算评审单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="勘察单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="预算编制单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="招标代理单位"></asp:BoundColumn>
<asp:BoundColumn DataField="" HeaderText="质量监督单位"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</div>