[Résolu] Menu fixe

Hello,

Quelque soit la techno (CSS, JS), il faudra quand même résoudre la question purement ergonomique qui est que ton élément est censé être à la fois fixé et plus haut que la fenêtre. Comment vois-tu les choses ?

L'idée serait peut-être de le fixer uniquement si la fenêtre est assez grande, non ?

Bonjour,

sans plus de détails, je te proposerais de te servir de la position:sticky; qui te permet de le positionné pour qu'il s'accroche au haut,bas,gauche ou droite de son parent tant qu'il y a de la place ...

voici un exemple https://codepen.io/gc-nomade/pen/zYNyado (en principe le menu est trop long , mais le bas reste accessible).

et une définition https://developer.mozilla.org/fr/docs/Web/CSS/position

a écrit :
La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à selon les valeurs de son bloc englobant top, right, bottom et left . Dans tous les cas, y compris avec les éléments table , cela n'affecte pas la position des autres éléments.

Cette valeur entraîne toujours la création d'un nouveau contexte d'empilement .
contexte d'empilement voir : https://developer.mozilla.org/fr/docs/Glossary/Stacking_context

On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand overflow vaut hidden , scroll , auto ou overlay ) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut overflow: hidden ou < auto ( https://github.com/w3c/csswg-drafts/issues/865 ).

Cdt

edit : Comme indiqué par Raphaël , coté ergonomie tu verra vite les limites et ça va probablement se corser en passant coté mobile.
Modifié par gcyrillus (23 Apr 2021 - 14:54)