Detaillierte Erläuterung der JS-Implementierung des festen Tabellenkopfes und des Bildlaufkopfes mit horizontalem Bildlauf

In diesem Artikel wird hauptsächlich die Implementierung eines festen Tabellenkopfes vorgestellt, und Freunde, die ihn benötigen, können darauf verweisen.

Schauen Sie sich zuerst ein Rendering an

Ideen:

1 Verwenden Sie einen Tisch für den Kopf und a Mit p umschlossen, wird der spezifische Inhalt der Tabelle als Tabelle verwendet

2 Das p außerhalb des Kopfes wird mithilfe der Position relativ positioniert

3. Ermitteln Sie die Höhe der gesamten Tabelle

4 , Ermitteln Sie den Abstand zwischen dem Dom der Tabelle (oder dem Dom, der die Tabelle umschließt) und dem oberen Rand der Seite offsetTop

5 Der Abstand zwischen dem scrollenden Nullpunkt und der Höhe von die Tabelle + der Abstand zwischen der Tabelle und dem oberen Rand der Seite, wenn der obere Wert des Kopfes auf 0 zurückgesetzt wird oder intakt bleibt

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

Off topic Warum rote Tabellenüberschriften verwenden, weil sie auffällig sind?

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(&#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;)
              }
            }
          })
        }
      }

Verwandte Empfehlungen:

Wie man eine Tabelle mit jquery bedient Zusammenfassung von Beispielen verschiedener Methoden

5 Möglichkeiten, dies zu erreichen der Slash-Header-Effekt in Tabellentabellen in HTML5

Beispielcode für die horizontale und vertikal zentrierte Anzeige von Inhalten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JS-Implementierung des festen Tabellenkopfes und des Bildlaufkopfes mit horizontalem Bildlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!