L'en-tête de tableau fixe fait défiler le formulaire horizontalement

Cette fois, je vais vous présenter l'en-tête de tableau fixe pour faire défiler le formulaire horizontalement. Quelles sont les précautions concernant la fixation de l'en-tête de tableau pour faire défiler le formulaire horizontalement. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Utilisez un tableau dans l'en-tête et enveloppez-le avec un p, et utilisez un tableau pour le contenu spécifique de

table

2. Utilisez positon : par rapport à la position du p à l'extérieur de la tête

3. Obtenez la hauteur de toute la table

4. Obtenez la distance entre le DOM de la table (ou le DOM enveloppant la table) et le haut de la page offsetTop

5. La distance entre le point zéro du défilement et la hauteur du tableau + la distance entre le tableau et le haut de la page si le défilement dépasse cette valeur, la valeur supérieure de l'en-tête sera remise à 0 ou laissée inchangée <.>

Bien sûr, il existe de nombreux domaines qui peuvent être optimisés. Je montre juste une petite idée hehehe

. Hors sujet, pourquoi tu utilises un compteur rouge Parce que c'est visible haha

Code JS

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Conseils pour utiliser le menu déroulant du plug-in déroulant Bootstrap

Explication détaillée de l'utilisation de tofixed et round dans JS

AngularJS rappelle la limite de caractères de la zone de saisie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!