JS implementiert einen festen Tabellenkopf und der Tabellenkopf scrollt mit horizontalem Scrollen

Dieser Artikel stellt hauptsächlich die JS-Implementierung von TabellenTabellen mit festem Header vor und der Header kann mit horizontalem Scrollen scrollen. Freunde, die mit js vertraut sind, können auf diesen Artikel verweisen

Lesen Sie ihn erstes A-Rendering

Idee:

1. Verwenden Sie eine Tabelle am Kopf und wickeln Sie sie mit einem p ein der Tabelle Verwenden Sie eine Tabelle

2. Verwenden Sie Position: relativ, um das p außerhalb des Kopfes zu positionieren

Ermitteln Sie die Höhe der gesamten Tabelle Dom (oder Paket) der Tabelle Der Abstand zwischen dem Dom der Tabelle und dem oberen Rand der Seite offsetTop

5. Die Höhe der Tabelle vom Nullgrenzpunkt der Schriftrolle + der Abstand zwischen der Tabelle und der obere Rand der Seite überschreitet diesen Wert, lassen Sie den oberen Wert des Kopfes auf 0 zurückkehren oder lassen Sie ihn intakt

Natürlich gibt es viele Bereiche, die das können optimiert werden, ich zeige nur eine kleine Idee, hehehe

Off-Topic, warum benutzt du einen roten Header, weil er auffällig ist? >

Das Obige ist der vom Editor eingeführte JS, um einen festen Tabellenkopf zu implementieren und den Tabellenkopf mit horizontalem Scrollen zu scrollen. Ich hoffe, es hilft allen! !

Verwandte Empfehlungen:

Detaillierte Erklärung von JavaScript, um festzustellen, ob der Benutzer die Seite bedient hat

/**
     * 最重要的一点是头和身体是两个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;)
              }
            }
          })
        }
      }

JavaScript ermöglicht das Klicken überall im Web Seite, um ein neues Fenster zu öffnen und zu schließen. Fenstermethode

Verwenden Sie JavaScript, um eine kleine Programm-99-Multiplikationstabelle zu implementieren

Das obige ist der detaillierte Inhalt vonJS implementiert einen festen Tabellenkopf und der Tabellenkopf scrollt mit horizontalem Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!