Jquery primitive implementation of the table header with the scroll bar scroll and scroll

  • 2020-03-30 02:25:49
  • OfStack

While working on a project recently, the functionality was implemented, and suddenly the user requested that the header be floating (because the content is displayed on the same page, the header is not visible when scrolling). Since the function has been implemented using jquery+ pure HTML, in order to change less can only use jquery original ecology to achieve scrolling.

HTML header code:
 
<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"> The 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;"> Cultivation of talents </td> 
<td colspan="3"> Title structure </td> 
<td colspan="2"> Degree in structure </td> 
<td colspan="2"> Born teacher than </td> 
<td colspan="2"> Scientific research project </td> 
<td colspan="6"> Research achievement award </td> 
<td colspan="6"> Research papers </td> 
<td style="border-top:0px;border-bottom:0px;"> </td> 
</tr> 
<tr class="header"> 
<td width="150" style="border-top:0px;"> The 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 staff </td> 
<td> Number of senior faculty </td> 
<td> Number of intermediate staff </td> 
<td> Number of doctoral degree staff </td> 
<td> Number of master's degree faculty </td> 
<td> Undergraduate student teacher ratio </td> 
<td> Study the ratio of students to teachers </td> 
<td> Longitudinal project </td> 
<td> Transverse project </td> 
<td> National scientific research achievements </td> 
<td> Ministerial research achievements </td> 
<td> Provincial scientific research achievements </td> 
<td> Research achievements at the prefectural level </td> 
<td> University-level scientific research achievements </td> 
<td> Other scientific achievements </td> 
<td> Core journal papers </td> 
<td> One category awards journal papers </td> 
<td> Second class journal papers </td> 
<td> Three categories of journal papers </td> 
<td> General journal articles </td> 
<td> Foreign journal articles </td> 
<td style="border-top:0px;"> Financial wages </td> 
</tr> 

Jquery code:
 
$(window).scroll(function(){ 
var headers = $(".header");//Gets all the table header rows, the current 3 row header
var yy = $(this).scrollTop();//Scroll bar top value
if(yy>55){ 
yy = yy-55; 
} 
var height1 = yy;//The top value in the first row
var height2 = $(headers[0]).height()+yy;<span style="font-family:Arial,Helvetica,sans-serif">//The top value of the first row, the height of the first row with </ span> <Span style = "the font-family: Arial, Helvetica, sans-serif"> Scrollbar top sum </ span> <Span style = "the font-family: Arial, Helvetica, sans-serif">
</span> var height3 = $(headers[0]).height()+$(headers[1]).height()+yy; 
$(headers[0]).css({"position":"absolute",top:height1+"px"});//The float 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 contents are automatically moved up. To float the table head without overwriting the table contents, set the blank rows and set the height of the table head as high </ span>

Note: do not use the rowspan property for cells with multi-line headers, or the headers will be misplaced.

Related articles: