> 웹 프론트엔드 > JS 튜토리얼 > JS는 고정된 테이블 헤더를 구현하고 테이블 헤더는 수평 스크롤로 스크롤됩니다.

JS는 고정된 테이블 헤더를 구현하고 테이블 헤더는 수평 스크롤로 스크롤됩니다.

韦小宝
풀어 주다: 2018-01-17 10:38:03
원래의
3405명이 탐색했습니다.

이 글은 테이블table고정 테이블 헤더를 구현하는 JS를 주로 소개하며 테이블 헤더는 가로 스크롤로 스크롤할 수 있습니다. JS에 익숙한 친구들은 이 글을 참고하세요

렌더링을 먼저 보세요

JS는 고정된 테이블 헤더를 구현하고 테이블 헤더는 수평 스크롤로 스크롤됩니다.

:

1. 테이블을 머리로 사용하고 테이블의 특정 내용에 대해 테이블을 사용합니다.

2. 머리 외부의 p에 대해 상대 위치를 사용합니다. 테이블 전체

4. 테이블 돔(또는 테이블을 감싸는 돔)과 페이지 상단 사이의 거리를 가져옵니다.

5. + 테이블과 페이지 상단 사이의 거리가 이를 초과하면 상단 값이 0으로 반환되거나 그대로 유지됩니다.

JS는 고정된 테이블 헤더를 구현하고 테이블 헤더는 수평 스크롤로 스크롤됩니다. 물론 최적화할 수 있는 영역이 많이 있습니다. 작은 아이디어를 보여주세요 ㅎㅎㅎ

주제에서 벗어나 빨간색 헤더가 눈에 띄기 때문에 왜 사용하는 걸까요 와하

JS 코드

/**
     * 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算
     * */
      function FixedHead (){
        if( !(this instanceof FixedHead) ){
          return new FixedHead()
        };
        this.$dom = $('.dataTables_scrollHead'); // 表头外层dom
        this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度
        this.parents = this.$dom.parents('.dataTables_scroll'); // 表头外层dom最外面的盒子(包裹着table的盒子)
        this.outBoxHeight = this.parents.height(); // 表头外层dom最外面的盒子(包裹着table的盒子)的高度
        this.maxHeight = this.offsetTop + this.outBoxHeight; // 滚动的零界点 最多能滚动到哪里
        this.scroll();
      }
      FixedHead.prototype = {
        constructor: FixedHead,
        scroll: function(){
          var that = this;
          $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            if((scrollTop > that.offsetTop) && (scrollTop < that.maxHeight)){
              that.$dom.css(&#39;top&#39;, (scrollTop - that.offsetTop + 50)+&#39;px&#39;) // 这个50是因为我的头部导航固定在顶部 高是50 所以要加上
            }else {
              var topCss = that.$dom.css(&#39;top&#39;);
              if(topCss === &#39;0px&#39; || topCss === &#39;auto&#39;){
              }else {
                that.$dom.css(&#39;top&#39;, &#39;0px&#39;)
              }
            }
          })
        }
      }
로그인 후 복사
위는 고정 테이블 헤더를 구현하기 위해 편집기에서 도입한 JS 구현이며 테이블 헤더는 다음과 같이 스크롤됩니다. 가로 스크롤이 모든 사람에게 도움이 되기를 바랍니다. !

관련 추천 :

사용자가 페이지를 조작했는지 확인하는 JavaScript에 대한 자세한 설명

JavaScript는 웹 페이지의 아무 곳이나 클릭하면 새 창을 열고 창을 닫는 방식을 구현합니다.

사용 작은 프로그램 99 구구단을 구현하는 JavaScript

위 내용은 JS는 고정된 테이블 헤더를 구현하고 테이블 헤더는 수평 스크롤로 스크롤됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿