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

  headers are floating because the content is displayed on the same page, and when scrolling, the column headers are not visible, so you can only use the jquery original implementation scrolling for less change

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:    code is as follows: <tr class= "header" >  <td width= "the" style= "border-bottom:0px;" > </td>  <td colspan= "2" style= "border-bottom:0px;" > </td>  <td colspan= "7" > Faculty </td>  <td colspan= "A" > Research </td>  <TD Style= "border-bottom:0px;" > </td>  </tr>  <tr class= "header" >  <td width= "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" > Division </td>  <td colspan= "2" > Research project </td>  <td colspan= "6" > Scientific Research Award </td>  <td colspan= "6" > Scientific research paper </td>  <td style= "border-top:0px;border-bottom:0px;" > </td>  </tr>  <tr class= "header" >  <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> Number of faculty </td>  <td> senior staff </td>  <td> Intermediate Faculty number </td>  <td> Ph. d. Staff </ td>  <td> Master's degree faculty </td>  <td> Undergraduate Health Division </td>  <td> graduate students   <td> longitudinal project </td>  <td> Transverse project </td>  <td> National Research Achievement </td>  <TD > Ministerial achievements </td>  <td> Provincial scientific research </td>  <td> ground level scientific research results </td>  <td> School-level scientific research </td>  <td> Other scientific research </td>  <td> core periodicals, </td>  <td>, a class of reward periodical papers </td >  <td> two awards journal articles </td>  <td> three types of reward journal articles </td>  <td> general journal paper </td>   <td> Foreign periodical Papers;/td>  <td style= "border-top:0px;" > Financial Wages </td>  </tr>    jquery code:  code as follows: $ (window). Scroll (function () {  var headers = $ (". Header");/Get all Header rows, currently 3 rows header   var yy = $ (this). ScrollTop ()/scroll bar top value   if (yy>55) {  yy = yy-55; }  var height1 = yy;//First line top value   var height2 = $ (headers[0]). Height () +yy;<span style= " Font-family:arial,helvetica,sans-serif ">//first row top value, first row high and </span><span style=" font-family:arial, Helvetica,sans-serif "> scroll bar Top value and </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" >//as the table head floats, The corresponding table content is automatically moved up, in order to float the table header will not overwrite the table content, set blank row, height is header high </span>    Note: When a multiline header, the cell does not use the RowSpan property, otherwise the table header will be misplaced.