Fixed table header makes the form scroll horizontally

This time I will bring you the fixed table header to make the form scroll horizontally, and the fixed table header to make the form scroll horizontally. 1. The header is wrapped with a table and wrapped with p, and the specific content of

table

is wrapped with a table 2. Use positon: relative to position the p outside the head

3. Get the height of the entire table

4. Get the distance between the DOM of the table (or the DOM wrapping the table) and the top of the page offsetTop

5. The distance between the zero point of scrolling, the height of the table, and the distance between the table and the top of the page. If the scroll exceeds this, the top value of the head will be returned to 0 or left unchanged. Of course, there are many areas that can be optimized. Just showing a little idea hehehe

Off topic, why do you use red meter? Because it is conspicuous. Haha

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')
              }
            }
          })
        }
      }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:

Bootstrap drop-down plug-in dropdown usage tips

Detailed explanation of tofixed and round usage in JS

AngularJS makes input box character limit reminder

The above is the detailed content of Fixed table header makes the form scroll horizontally. For more information, please follow other related articles on the PHP Chinese website!