고정된 테이블 헤더로 인해 양식이 가로로 스크롤됩니다.

이번에는 양식을 가로로 스크롤할 수 있도록 테이블 헤더를 고정하는 방법을 소개하겠습니다. 테이블 헤더를 수정하여 양식을 가로로 스크롤할 수 있는 주의사항은 무엇인가요?

1. 헤드는 테이블로 하고 p로 감싸고, 테이블의 구체적인 내용은 테이블

을 사용하세요. 2. 위치 사용: 머리 바깥쪽의 p 위치를 기준으로

3. 테이블 전체의 높이를 구하세요

4. 테이블의 DOM(또는 테이블을 감싸는 DOM)과 페이지 상단 사이의 거리를 구합니다. offsetTop

5. 스크롤 영점과 테이블 높이 사이의 거리 + 테이블과 페이지 상단 사이의 거리. 이 값을 초과하면 헤더의 상단 값이 0으로 반환되거나 변경되지 않은 채로 유지됩니다

물론 최적화할 수 있는 곳도 많겠지만 한 곳만 보여드릴게요 ㅎㅎㅎ

주제넘게 눈에 띄니까 왜 빨간색 미터를 쓰나요? ㅋㅋㅋ

JS code

/**
     * 最重要的一点是头和身体是两个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('top', (scrollTop - that.offsetTop + 50)+'px') // 这个50是因为我的头部导航固定在顶部 高是50 所以要加上
            }else {
              var topCss = that.$dom.css('top');
              if(topCss === '0px' || topCss === 'auto'){
              }else {
                that.$dom.css('top', '0px')
              }
            }
          })
        }
      }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Bootstrap 드롭다운 플러그인 드롭다운 사용 팁

JS의 tofixed 및 round 사용법에 대한 자세한 설명

AngularJS는 입력 상자 단어 제한 알림을 만듭니다

위 내용은 고정된 테이블 헤더로 인해 양식이 가로로 스크롤됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!