En français, cela donnerait : Tableau en-tête à rester fixé en haut lorsque l'utilisateur le fait défiler hors de la vue avec jQuery

Question

Je cherche à concevoir un tableau HTML où l'en-tête restera en haut de la page UNIQUEMENT lorsque l'utilisateur le fait défiler hors de la vue. Par exemple, le tableau peut être situé à 500 pixels de la page, comment puis-je faire en sorte que si l'utilisateur fait défiler l'en-tête hors de la vue (le navigateur détecte qu'il n'est plus visible dans la fenêtre), il restera en haut? Quelqu'un peut-il me donner une solution en Javascript à cela?

      Col1
      Col2
      Col3

      info
      info
      info

      info
      info
      info

      info
      info
      info

Donc, dans l'exemple ci-dessus, je veux que le fasse défiler avec la page s'il sort de la vue.

IMPORTANT: Je ne recherche PAS une solution où le aura une barre de défilement (overflow:auto).

Answer 1

Vous feriez quelque chose comme cela en vous branchant sur l'événement scroll de la window, et en utilisant un autre table avec une position fixe pour afficher l'en-tête en haut de la page.

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

#header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

      Col1
      Col2
      Col3

      info
      info
      info

      info
      info
      info

      info
      info
      info

Cela affichera l'en-tête du tableau lorsque l'utilisateur fait défiler suffisamment pour masquer l'en-tête d'origine du tableau. Il se masquera à nouveau lorsque l'utilisateur a fait défiler la page suffisamment vers le haut.

Exemple de travail: https://jsfiddle.net/andrewwhitaker/fj8wM/

Answer 2

Eh bien, j'essayais d'obtenir le même effet sans recourir à des colonnes de taille fixe ou ayant une hauteur fixe pour l'ensemble du tableau.

La solution que j'ai trouvée est un hack. Elle consiste à dupliquer l'ensemble du tableau puis à masquer tout sauf l'en-tête, et à le rendre en position fixe.

HTML

            Col1
            Col2
            Col3

            info
            info
            info

            info
            info
            info

            info
            some really long line here instead
            info

            info
            info
            info

            info
            info
            info

            info
            info
            info

            info
            info
            info

CSS

body { height: 1000px; }
thead{
    background-color:white;
}

javascript

function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll

`

Voir ici: http://jsfiddle.net/QHQGF/7/

Modifier: code mis à jour pour que thead puisse recevoir des événements de pointeur (donc les boutons et liens dans l'en-tête fonctionnent toujours). Cela corrige le problème signalé par luhfluh et Joe M.

Nouveau jsfiddle ici: http://jsfiddle.net/cjKEx/

`

Answer 3

J'ai écrit un plugin qui fait ça. Je travaille dessus depuis environ un an maintenant et je pense qu'il gère assez bien tous les cas particuliers :

• défilement dans un conteneur avec débordement
• défilement dans une fenêtre
• prendre soin de ce qui se passe lorsque vous redimensionnez la fenêtre
• garder vos événements liés à l'en-tête
• le plus important, il ne vous oblige pas à changer le CSS de votre tableau pour faire fonctionner

Voici quelques démos/documents :
http://mkoryak.github.io/floatThead/

Answer 4

J'ai pu résoudre le problème en modifiant les largeurs des colonnes. J'ai commencé avec la solution d'Andrew ci-dessus (merci beaucoup !) et j'ai ensuite ajouté une petite boucle pour définir les largeurs des td clonés :

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

Cela résout le problème sans avoir à cloner l'ensemble du tableau et à masquer le corps. Je suis tout nouveau en JavaScript et jQuery (et sur stack overflow), donc tous les commentaires sont appréciés.

Answer 5

C’est de loin la meilleure solution que j’ai trouvé pour avoir un en-tête de table fixe.

CSS

JavaScript

Source : http://codepen.io/jgx/pen/wiIGc