Discussion :

[marcandre]

Bonjour à tous,


J'ai créé un script permettant d'avoir un tableau html avec des articles avec un nombre de colonnes qui peut varier. Le tableau a la particularité d'avoir une entête où cette dernière lorsqu'on actionne la scrollbare verticale en la faisant, au moment où l'entête touche le haut du navigateur il reste fixe même si on continue à faire monter le tableau. Jusque là c'est la fonctionnalité que je souhaite.

Cependant, dans certain cas il peut y avoir une scrollbare horizontale, car le tableau en question est plus large que le corps du navigateur. Si l'utilisateur bouge la scrollbare horizontale l'entête du tableau reste fixe et cela fait décaler les colonnes par rapport à l'entête. les colonnes ne sont plus en face de leurs titres correspondant au niveau des entêtes.

Se que je souhaite :

C'est d'avoir un tableau avec une entête flottante restant fixe si le tableau monte trop haut en utilisant la scrollbare verticale (ce qui est fait)

Que le tableau ait une entête restant bien en face des colonnes lorsque l'on fait bouger la scrollbare horizontale.

Je voudrai avoir un tableau avec une entête fixe verticalement et non fixe horizontalement (les colonnes restent en face des titres correspondants).

Voici le code javascript utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function UpdateTableHeaders() {
   $(".persist-area").each(function() {
 
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
 
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}
 
// DOM Ready      
$(function() {
 
   var clonedHeaderRow;
 
   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");
 
   });
 
   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
 
});
</script>

Le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="persist-area" >
<thead><tr class="persist-header" >
<th >Colonne 1</th>
<th >colonne 2</th>
<th >Colonne 3</th>
<th >Colonne 4</th>
<th >Colonne 5</th></tr>
</thead>
<tbody>
<tr>
<td>Attribut 1</td>
<td>Attribut 2</td>
<td>Attribut 3</td>
<td>Attribut 4</td>
<td>Attribut 5</td>
	</tr>
</tbody>
</table>

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.floatingHeader {
	background-image:url(img.png);background-repeat:repeat-x;color:#FFFFFF; font-weight:bold;background-color:#2A2A2A; 
  position: fixed;
  top: 0;
  visibility: hidden;
}
 
.persist-header{
	background-image:url(imgpng);background-repeat:repeat-x;color:#FFFFFF; font-weight:bold;background-color:#2A2A2A;
}

Cordialement.

[marcandre]

J'ai résolu le problème de positionnements fixes face aux colonnes même en bougeant la scrollbarre horizontale.

en ajoutant le bout de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

floatingHeader.css('left', (pos -$(window).scrollLeft()));

pos étant la position de l'entête par rapport à la gauche du navigateur.


Cordialement.