JS implements a fixed table header and the table header scrolls with horizontal scrolling-JS Tutorial-php.cn

JS implements a fixed table header and the table header scrolls with horizontal scrolling

韦小宝

Release： 2018-01-17 10:38:03

Original

3341 people have browsed it

This article mainly introduces the JS implementation of tableTableThe table header is fixed and can scroll with horizontal scrolling. Friends who are familiar with js can refer to this article

Read it first A rendering

JS implements a fixed table header and the table header scrolls with horizontal scrolling

Idea:

1. Use a table at the head and wrap it with a p. The specific content of the table Use a table

2. Use positon: relative for p outside the head

3. Get the height of the entire table

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

5), the distance between the scrolling zero point and the height of the table + the distance between the table and the top of the page. If the scroll exceeds this, return the top value of the head to 0 or Leave it intact

JS implements a fixed table header and the table header scrolls with horizontal scrolling

#Of course there are many areas that can be optimized, I just show a small idea hehehe

Off topic why use red header because it is conspicuous Wowhaha

JS code

/**
     * 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算
     * */
      function FixedHead (){
        if( !(this instanceof FixedHead) ){
          return new FixedHead()
        };
        this.$dom = $(&#39;.dataTables_scrollHead&#39;); // 表头外层dom
        this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度
        this.parents = this.$dom.parents(&#39;.dataTables_scroll&#39;); // 表头外层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;)
              }
            }
          })
        }
      }

Copy after login

The above is the JS introduced by the editor to realize the fixed header of the table table and the header will scroll with horizontal scrolling. I hope Helpful for everyone! !

Related recommendations:

Javascript determines whether the user has operated the page Detailed explanation

JavaScript realizes clicking anywhere on the web page to open a new window and close it Window method

Use JavaScript to implement a small program 99 multiplication table

The above is the detailed content of JS implements a fixed table header and the table header scrolls with horizontal scrolling. For more information, please follow other related articles on the PHP Chinese website!