Jquery original ecology implements the table header to scroll as the scroll bar scrolls_jquery

I was working on a project recently and the function had been implemented. Suddenly the user requested that the table header be floating (because the content is displayed on the same page and the column headers cannot be seen when scrolling). Since the function has been implemented using jquery pure html, in order to reduce changes, we can only use jquery original ecology to implement scrolling.

html header code:

Copy code The code is as follows:

< ;tr class="header" >


Faculty
Scientific Research< ;/td>




Talent training
Professional title structure
Degree structure
Student-teacher ratio
Scientific research project
Scientific Research Achievement Award
Scientific Research Paper



Teaching unit
Number of undergraduate students
Number of graduate students
< td>Number of teaching staff
Number of senior staff
Number of intermediate staff
Ph.D. Number of staff with degree
Number of staff with master's degree
Undergraduate student-teacher ratio
Graduate student Teacher comparison
Vertical project
Horizontal project
National scientific research resultsMinistry-level scientific research results
Provincial-level scientific research results
Prefecture-level scientific research results
School-level scientific research results
Other scientific research results
Core journal papers
< td>First-category award journal articles
Second-category award journal articles
Third-category award journal articles
< ;td>General journal articles
Foreign journal articles
Financial salary

jquery code:

Copy code The code is as follows:

$(window).scroll(function(){
var headers = $(".header");//Get all header rows, the current one is 3 rows of headers
var yy = $(this).scrollTop();//Scroll bar top value
if(yy>55){
yy = yy-55;
}
var height1 = yy ;//The top value of the first line
var height2 = $(headers[0]).height() yy;//No. The top value of a row, the sum of the row height of the first row and the top value of the scroll bar
var height3 = $(headers[0]).height() $(headers[1]).height() yy;
$(headers[0]).css({"position":"absolute",top:height1 "px"});//Floating row
$(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());//As the header floats, the corresponding table content automatically moves up. In order to float the header The table content will not be overwritten, and a blank row will be set. The height will be the height of the table header

Note: When using multi-line headers, do not use the rowspan attribute in cells, otherwise the headers will be misaligned.