Discussion :

[jameson]

bonjour, je vous explique ma structure.

j'ai un header où j'ai une un menu horizontal avec un scrool horizontal.

en dessous de ce header, j'ai un container qui comprend une liste.

ce container est scrollable verticalement.
de plus je peux avoir des li qui sont scrollable horizontalement dans ce container.

Le problème que je rencontre :

- mon header doit etre fixe et doit rester en position lors du scrool de la liste (de ce coté ça fonctionne bien j'ai dans mon css pour mon header position: fixed

- mais quand je scrool mon container, celui passe en dessous de mon header alors que je voudrais que celui scroll dans ça div personnelle sans gener les scrool hotizontal et vertical.

header css :

Code :

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

1
2
3
4
 
position: fixed;
z-index: 1;
width: 100%;

container css:

Code :

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

1
2
3
4
5
padding-top: 100px;
overflow: hidden;
z-index: 2;
overflow-y: hidden;
text-decoration: none;

j'ai plus ou moins resolu le probleme en faissant ça :
j'ajoute une div autour de mon container

Code :

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

1
2
3
4
5
6
 
position: fixed;
height: 85%;
margin-top: 100px;
overflow: scroll;
width: 100%;

et je supprime le padding-top du container.

Probleme par la suite la focntion scrollTop javascript ne focntionne plus car position == fixed.

je sais pas comment mieux faire si j'enleve la position fixed tous mon header descend donc pas top

[rodolphebrd]

Bonjour,

ça serait intéressant de voir le code HTML pour éviter de l'écrire.

[jameson]

voila

Code html :

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
44
<header id="header" style="display: block;">
    <hgroup>
      <div id="headerApp">
        <img src="images/logo.png">
        <input id="paramsButton" type="button">
      </div>
    </hgroup>
 
 
  <div id="menuContainer">
    <nav id="menu">
      <ul>
        <li class="m0"><a href="#app/m0">val1</a></li>
        <li class="m1"><a href="#app/m1">val2</a></li>
        <li class="m2"><a href="#app/m2">val3</a></li>
        <li class="m3"><a href="#app/m3">val4</a></li>
        <li class="m4"><a href="#app/m4">val5</a></li>
        <li class="m5"><a href="#app/m5">val6</a></li>
        <li class="m6"><a href="#app/m6">val7</a></li>
      </ul>
    </nav>
  </div>
</header>
 
<div class="scroll" style="position: fixed; height: 85%; margin-top: 100px; overflow: scroll;width: 100%;">
 
    <div id="container" style="display: block;">
 <ul>
 
	<li class="mea" idcontent="446588">
 
		</li>
<li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li>
     </ul>   
      </div>
  </div>