table固定表頭使表單橫向捲動

這次帶給大家table固定表頭讓表單橫向捲動，table固定錶頭讓表單橫向捲動的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.頭部用一個table並用一個p包裹著， 表格的具體內容用一個table

# 2.頭部外面的p用positon: relative相對定位

3、取得整個表格的高度

4.取得表格的dom（或包裹著表格的dom）距離頁面頂部的距離 offsetTop

# 5.滾動的零界點的距離表格的高度表格距離頁面頂部的距離如果滾動超過這個就讓頭部的top值歸0或原封不動

#當然還有很多可以優化的地方我只是展示一個小想法嘿嘿嘿

題外話 為啥用紅色表頭 因為顯眼哇 哈哈

# 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('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下拉外掛程式dropdown使用技巧

JS裡tofixed與round使用詳解

AngularJS做出輸入框字數限制提醒

#

以上是table固定表頭使表單橫向捲動的詳細內容。更多資訊請關注PHP中文網其他相關文章！