Der feste Tabellenkopf sorgt dafür, dass das Formular horizontal scrollt

Dieses Mal stelle ich Ihnen den festen Tabellenkopf vor, damit das Formular horizontal scrollt. Was sind die Vorsichtsmaßnahmen zum Fixieren des Tabellenkopfes, damit das Formular horizontal scrollt? Werfen wir einen Blick darauf.

1. Verwenden Sie eine Tabelle in der Kopfzeile, umschließen Sie sie mit einem p und verwenden Sie eine Tabelle für den spezifischen Inhalt von

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

3. Ermitteln Sie die Höhe des gesamten Tisches

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

5. Der Abstand zwischen dem Nullpunkt des Bildlaufs und der Höhe der Tabelle + der Abstand zwischen der Tabelle und dem oberen Rand der Seite. Wenn der Bildlauf diesen Wert überschreitet, wird der obere Wert der Kopfzeile auf 0 zurückgesetzt oder unverändert gelassen

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

Off-Topic, warum benutzt du ein rotes Messgerät, weil es auffällig ist, 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')
              }
            }
          })
        }
      }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tipps zur Verwendung des Bootstrap-Dropdown-Plug-Ins Dropdown

Ausführliche Erklärung der Verwendung von tofixed und rund in JS

AngularJS erinnert an die Zeichenbeschränkung im Eingabefeld

Das obige ist der detaillierte Inhalt vonDer feste Tabellenkopf sorgt dafür, dass das Formular horizontal scrollt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!