Jquery Original Ecology implement table header scrolling with the scroll bar _ jquery

The header is floating, because the content is displayed on the same page. When scrolling, you cannot see the column header. To reduce the number of changes, you can only use jquery original ecology to implement rolling. Recently, a project has been created, and the function has been implemented, the user suddenly asked the table header to 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:

The Code is as follows:

Faculty
Scientific Research




Talent Training
Title Structure
Degree structure
Student/teacher ratio
Scientific Research Project
Scientific Research Achievement Award
Research papers



Teaching Unit
Number of Undergraduates
Number of graduate students
Number of faculty members
Number of senior faculty members
Number of intermediate faculty members
Number of doctoral workers
Master's degree Faculty
Undergraduate Students
Study student-teacher ratio
Vertical Project
Horizontal Project
National Scientific Research Achievements
Ministerial scientific research achievements
Provincial Scientific Research Achievements
Prefecture-level scientific research achievements
School-level scientific research achievements
Other scientific research achievements
Core Journal Papers
One-class award Journal Papers
Second-class award Journal Papers
Three types of award Journal Papers
General Journal Papers
Foreign Journal Papers
Financial salary

Jquery code:

The 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; // The top value of the first row, the sum of the height of the first row and the top value of the scroll bar
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 (); // because the table header is floating, the corresponding table content is automatically moved up. To ensure that the floating table header does not overwrite the table content, set the blank row, and the height is the header height.

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