[Résolu] Menu fixe

Bonjour,

Je suis un train d'intégrer une page web sur laquelle je dois mettre un petit menu en fixe, qui suit donc le défilement de la page.



Malheureusement, il est assez long et dès que je lui ajoute un

position:fixed;

, il est coupé.

Je pense qu'il faut développer en js, mais je ne sais pas comment faire.

Merci par avance.

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)