Problèmes de scrolling (fixed ou sticky) + jquery.floatThead

Bonjour,

J'ai repris récemment le développement web de différents outils à mon travail.
Je suis encore relativement débutant (je poursuis des cours du soir au cnam),
Je ne maîtrise pas encore bien tous les concepts html/css/php/js/jquery et je m'embrouille surement tant il y a de choses à comprendre et à retenir..

mon problème est le suivant:

sur une page dynamique traitant un grand nombre d'informations (backup), on utilise une librairie (jquery.tablesorter.js) : cette page affiche un tableau dynamique donc.
On m'a demander de regarder si je pouvais faire en sorte que la partie (qu'on va appeller navbar) reste visible lors du scroll de la page vers le bas.

en fait il s'agit d'un tableau (<table><tr><th>.....) sauf que juste en dessous de ce header navbar (qui est un tableau donc (incluant du traitement php)), il y a le tableau principal qui utilise la librairie jquery.tablesorter.js...

j'espere que je ne vous ai pas perdu déjà

ce que j'arrive à faire :

1) appliquer une classe css sur le 1er tableau :

 .sticky_position {

        position: sticky;
		background-color: #eceff1;
		width:100%;
        top: 0;
      }

résultat => le 1er tableau (que j'appel navbar) scroll très bien quand je descend ma page.

2) Sur le tableau principal à présent : s'agissant d'un tableau dynamique a base de jquery si j'applique cette même classe à mon tableau sur la balise thead , cela ne fonctionne pas...
Je précise que J'ai besoin de scroller le thead de mon tableau dynamique principal qui se situe juste dessous la navbar car il permet de réaliser des opérations de tri sur les colonnes.


Donc, j'ai cherché un peu comment faire en sorte que mon thead puisse lui aussi scroller comme ma navbar et j'ai trouver ce plugin jquery : jquery.floatThead.min.js

que j'ai appliqué sur mon thead de mon tableau dynamique.

$(document).ready(function () {

	var $th_table = $('#table_2');
	$th_table.floatThead();

})

ps: table2 est l'id du tableau dynamique principale.

résultat => le thead scroll bien et le tri reste effectif

sauf que : patatra : les 2 éléments se chevauchent!!! : le thead du tableau dynamique passe toujours par dessus le tableau 1 (la navbar)

moi, je voudrais que le thead du tableau principal faisant appel à jquery.floatThead.min.js soit repoussé par mon 1er table (la navbar) de cette manière, les 2 éléments 'resterais' l'un sur l'autre lorsque je scroll vers la bas de ma page.

bon, je reconnais que j'ai pas bien tout pigé coté positionnement css.. surtout en ce qui concerne les éléments parents en position relative...

voici en gros le code 'simplifié sans toute la partie php qui génère des éléments en + dans les tableaux:


style que j'ai ajouté pour tester:

<style>

	  #test {
		/* position:fixed; */
		width:100%
	  }

	  .sticky_position {

        position: sticky;
		background-color: #eceff1;
		width:100%;
        top: 0;
      }

	  .thead_css {
		background-color: #eceff1;
		/* position: sticky; */
	  }
	  

</style>

<div class="container fullwidth">
   <div id=test>  // div que j'ai ajouté
     <table id='table1'>
     </table>
   </div>
  
   <div  id=\"separator\"></div>
   <div id="loadedJobs" class="popupbox" style="text-align: center; display: block; padding: 50px;></div>

    <table id="table2" class='table table-striped tablesorter datatable ' width='98%' align='center'>
    </table>

</div>

si quelqu'un peut m'aider .....

ps : pire maintenant je n'ai que le thead du table2 qui suit le scrolling .......

Salut,

Peux-tu nous fournir un screenshot pour que l'on comprenne mieux la problématique ? Je ne saisis pas la partie avec les 2 headers. Tu parles du thead de la table et du réel header de la page (aussi en sticky ?) quand tu dis qu'ils se chevauchent ?

Salut,

merci de t’intéresser à mon petit soucis...
Je me doutais bien que ce ne serais pas simple à comprendre..

voilà 2 screen pour mieux comprendre:

quand la page n'est pas scrollée:




puis après mes modifs actuelles + un scroll :



J'ai essayé pas mal de chose déjà mais il faut bien garder en tête que le premier element que je veux scroller est un tableau basic quand au second élement, il s'agit de l'entete seulement d'un tableau conçu à partir de la libraire jquery.tablesorter.js à laquelle j'ai tenté d'appliqué la librairie jquery.floatThead.min.js

en attendant, je me suis mis à lire ceci :
https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#revision

néenmoins je veux bien un peu d'aide quand même si quelqu'un à une idée.
Modifié par ginzu (29 Nov 2018 - 10:25)