Jquery Original Ecology achieves the scrolling of the table header with the scroll bar

Recently, I was working on a project. The function has been implemented and the user suddenly requested that the header be floating (because the content is displayed on the same page and the column header is invisible when scrolling ). Because jquery + pure html has been implemented in the function, you can only use the original ecology of jquery to implement scrolling for fewer changes.

Html header code:
Copy codeThe Code is as follows:
<Tr class = "header">
<Td width = "150" style = "border-bottom: 0px;"> </td>
<Td colspan = "2" style = "border-bottom: 0px;"> </td>
<Td colspan = "7"> faculty </td>
<Td colspan = "14"> Scientific Research </td>
<Td style = "border-bottom: 0px;"> </td>
</Tr>
<Tr class = "header">
<Td width = "150" style = "border-top: 0px; border-bottom: 0px;"> </td>
<Td colspan = "2" style = "border-top: 0px;"> Talent Training </td>
<Td colspan = "3"> title structure </td>
<Td colspan = "2"> degree structure </td>
<Td colspan = "2"> student/teacher ratio </td>
<Td colspan = "2"> scientific research project </td>
<Td colspan = "6"> Scientific Research Achievement Award </td>
<Td colspan = "6"> scientific research papers </td>
<Td style = "border-top: 0px; border-bottom: 0px;"> </td>
</Tr>
<Tr class = "header">
<Td width = "150" style = "border-top: 0px;"> teaching unit </td>
<Td> <a href = "javascript: void (0);" id = "undergraduate"> Number of undergraduates </a> </td>
<Td> <a href = "javascript: void (0);" id = "graduate"> Number of graduate students </a> </td>
<Td> Number of faculty members </td>
<Td> Number of senior faculty members </td>
<Td> Number of intermediate faculty members </td>
<Td> Number of doctoral workers </td>
<Td> Master's Degree faculty </td>
<Td> undergraduate student-teacher ratio </td>
<Td> Study ratio of students to students </td>
<Td> vertical project </td>
<Td> horizontal project </td>
<Td> National Scientific Research Achievements </td>
<Td> ministerial-level scientific research achievements </td>
<Td> Provincial Scientific Research Achievements </td>
<Td> prefecture-level scientific research achievements </td>
<Td> school-level scientific research achievements </td>
<Td> other scientific research achievements </td>
<Td> core journal papers </td>
<Td> one-class award Journal Papers </td>
<Td> second-class award Journal Papers </td>
<Td> three types of award Journal Papers </td>
<Td> general journal papers </td>
<Td> Foreign Journal Papers </td>
<Td style = "border-top: 0px;"> Financial salary </td>
</Tr>

Jquery code:
Copy codeThe Code is as follows:
$ (Window). scroll (function (){
Var headers = $ (". header"); // obtain all header rows. Currently, three headers are used.
Var yy = $ (this). scrollTop (); // The top value of the scroll bar.
If (yy> 55 ){
Yy = yy-55;
}
Var height1 = yy; // top value of the first line
Var height2 = $ (headers [0]). height () + yy; <span style = "font-family: Arial, Helvetica, sans-serif"> // top value of the first line, line 1 high and </span> <span style = "font-family: Arial, Helvetica, sans-serif "> sum of top values of the scroll bar </span> <span style =" font-family: Arial, Helvetica, sans-serif ">
</Span> var height3 = $ (headers [0]). height () + $ (headers [1]). height () + yy;
Vertex (headers0000000000000.css ({"position": "absolute", top: height1 + "px"}); // floating row
Certificate (headers00001).css ({"position": "absolute", top: height2 + "px "});
Certificate (headers00002).css ({"position": "absolute", top: height3 + "px "});

[Javascript] view plaincopy

$ ("# HiddenTd "). height ($ (headers [0]). height () + $ (headers [1]). height () + $ (headers [2]). height (); <span style = "font-family: Arial, Helvetica, sans-serif"> // The table content is automatically moved up due to the floating of the table header, to prevent table content from being overwritten by floating headers, set a blank row with a height of the header </span>

Note: When multiple rows are headers, do not use the rowspan attribute for cells. Otherwise, the header will be misplaced.