The original jquery Ecosystem Implementation table Header header scrolls with scroll bar _jquery

Recently in doing a project, the function has been implemented, suddenly the user asked the header is floating (because the content is displayed on the same page, when scrolling, do not see the column header). Since functionality has been implemented using jquery+ pure HTML, in order to change less can only use the jquery original ecological implementation scrolling.

HTML Header code:

Copy Code code as follows:

<tr class= "Header" >
&LT;TD width= "style=" border-bottom:0px; > </td>
&LT;TD colspan= "2" style= "border-bottom:0px;" > </td>
&LT;TD colspan= "7" > Teacher Strength </td>
&LT;TD colspan= > Scientific Research </td>
&LT;TD style= "border-bottom:0px;" > </td>
</tr>
<tr class= "Header" >
&LT;TD width= "style=" border-top:0px;border-bottom:0px; > </td>
&LT;TD colspan= "2" style= "border-top:0px;" > Talent Training </td>
&LT;TD colspan= "3" > Title Structure </td>
&LT;TD colspan= "2" > Degree structure </td>
&LT;TD colspan= "2" > Health Division </td>
&LT;TD colspan= "2" > Scientific research Project </td>
&LT;TD colspan= "6" > Scientific Research Award </td>
&LT;TD colspan= "6" > Research paper </td>
&LT;TD style= "border-top:0px;border-bottom:0px;" > </td>
</tr>
<tr class= "Header" >
&LT;TD width= "style=" border-top:0px; > Teaching Unit </td>
<td><a href= "javascript:void (0);" id= "undergraduate" > Undergraduate number </a></td>
<td><a href= "javascript:void (0);" id= "Graduate" > Postgraduate number </a></td>
<td> Faculty Number </td>
<td> number of senior staff </td>
<td> Intermediate Faculty Number </td>
<td> Ph. D employees </td>
<td> Master of Staff </td>
<td> Undergraduate Students </td>
<td> graduate Student's Division </td>
<td> Vertical Project </td>
<td> Landscape Projects </td>
<td> National Scientific Research </td>
<td> Ministerial achievements </td>
<td> Provincial scientific research </td>
<td> Level scientific research </td>
<td> School-level scientific research </td>
<td> Other scientific research </td>
<td> Core Journal Papers </td>
<td> a class of reward journal papers </td>
<td> two award journal papers </td>
<td> three types of award periodicals </td>
<td> General Journal Papers </td>
<td> Foreign journal Papers </td>
&LT;TD style= "border-top:0px;" > Financial Wages </td>
</tr>

jquery Code:

Copy Code code as follows:

$ (window). Scroll (function () {
var headers = $ (". Header")//Gets all header rows, currently 3 row headers
var yy = $ (this). ScrollTop ();//scroll bar top value
if (yy>55) {
yy = yy-55;
}
var height1 = yy;//First row top value
var height2 = $ (headers[0]). Height () +yy;<span style= "Font-family:arial,helvetica,sans-serif" >//the first line of the top value, First row height and </span><span style= "Font-family:arial,helvetica,sans-serif" > scroll bar Top value </span><span style= "Font-family:arial,helvetica,sans-serif" >
</span> var height3 = $ (headers[0]). Height () +$ (headers[1). Height () +yy;
$ (headers[0]). css ({"position": "Absolute", top:height1+ "px"});//Floating line
$ (headers[1]). css ({"position": "Absolute", top:height2+ "px"});
$ (headers[2]). 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 ">//because the table head floats, the corresponding table content automatically moves up, in order to float the table header does not overwrite the table content, sets the blank row, height is the table head high </span>

Note: Do not use the RowSpan property when a multiline header, or the table header will be misplaced.