Jquery 원래 생태학은 스크롤 막대로 스크롤할 테이블 헤더를 구현합니다.

최근에 프로젝트를 진행 중인데 갑자기 사용자가 테이블 헤더를 플로팅하도록 요청했습니다. (내용이 같은 페이지에 표시되고 스크롤할 때 열 헤더를 볼 수 없기 때문입니다.) 함수는 jquery 순수 HTML을 사용하여 구현되었으므로 변경을 줄이기 위해 jquery 원래 생태학만 사용하여 스크롤을 구현할 수 있습니다.

html 헤더 코드:

코드 복사 코드는 다음과 같습니다.

< ;tr class="header" >


교수진
과학 연구< ;/td>


>
인재 양성
직위 구조
학위 구조
학생-교사 비율
과학 연구 프로젝트
과학연구공로상
과학연구논문



교습 단위
학부생 수
대학원생 수 교직원 수
고급 직원 수
중급 직원 수
박사 수 학위 소지자
석사 학위 소지자 수
학부 학생-교사 비율
대학원생 교사 비교
수직적 프로젝트
수평적 프로젝트
국내 과학 연구 성과
부처급 과학연구결과
성급 과학연구결과
현급 과학연구결과 > 학교 수준의 과학 연구 결과
기타 과학 연구 결과
핵심 저널 논문
;1급 수상 저널 기사
2급 수상 저널 기사
3급 수상 저널 기사 td>일반 저널 기사
외국 저널 기사
재정 급여



jquery 코드:



코드 복사

코드는 다음과 같습니다. 🎜> $(window).scroll(function(){ var headers = $(".header");//모든 헤더 행을 가져옵니다. 현재 헤더 행은 3행입니다.var yy = $(this).scrollTop();//스크롤 막대 상단 값

if(yy>55){

yy = yy-55;
}
var height1 = yy ; //첫 번째 줄의 상위 값
var height2 = $(headers[0]).height() yy;// 아니요. 행의 상위 값, 첫 번째 행의 행 높이와 스크롤 막대
var height3 = $(headers[0]).height() $( headers[1]).height() yy;
$(headers[0]).css({"position":"absolute",top:height1 "px"});//플로팅 행
$ (headers[1]).css( {"position":"absolute",top:height2 "px"})
$(headers[2]).css({"position":"absolute",top :height3 "px"});

[javascript] 일반 사본 보기

$("#hiddenTd").height($(headers[0]).height() $(headers[ 1]).height() $( headers[2]).height());//헤더가 부동함에 따라 해당 테이블이 내용은 자동으로 위로 이동합니다. 표 내용은 덮어쓰이지 않으며, 높이는 표 머리글의 높이로 설정됩니다.


참고: 여러 줄 헤더를 사용할 때 셀에 rowspan 속성을 사용하지 마세요. 그렇지 않으면 헤더가 잘못 정렬됩니다.