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 :
container css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 position: fixed; z-index: 1; width: 100%;
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
et je supprime le padding-top du 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%;
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
Partager