27802 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un soucis avec le menu sticky. Dès qu'on arrive en milieu de page, le menu s'efface.
J'ai un peu de mal à comprendre. Alors bien sur, il va de soi que je dois zapper un truc.

Je rajoute un lien pour faire le test à ce qui pourrait m'orienter => Le lien

Merci d'avance pour vos aides
Merci Kerlutinoec.

Mais pourquoi la sortir puisque cela fonctionne mais jusque la moitié de la page. ?
Sticky fait coller sur le haut de la div parente. S'il y a quelque chose au delà de cette div parente il va finir par pousser la div parente vers le haut.

Il est sur quoi sticky ?
J'ai dit <nav> mais je pensais à l'élément contenant les menus qui a peut être un élément supérieur qui le pousse.
Modifié par kerlutinoec (10 Dec 2021 - 22:13)
Oui, je dirais, sans l'avoir vérifié, que la div parente du menu n'occupe pas toute la hauteur de la page et, quand on arrive à sa limite basse, elle pousse le menu avec elle vers le haut.
Suis-je complètement à côté ou c'est ça ?
Dans ce cas, la solution, c 'est de lui donner toute la hauteur de la page.
Je serais curieux de connaître la solution, si ce n'est pas ça.
Merci à tous d'avoir participer. J'ai trouvé la solution. Je n'utilise plus :
.monconteneur{position:sticky;}


j'ai procédé ainsi dans le header:
 $(window).on('scroll', function(){
            if($(window).scrollTop()) {
                $('#testnav').addClass('is-sticky');
            }
            else{
                $('#testnav').removeClass('is-sticky');
            }
        });    


Le conteneur a pour ID
<nav id="testnav" class="top-nav "> 
et au moment du scroll en haut de page, rajoute la class
.is-sticky
au conteneur et la supprime au retour.

Cette class "is-sticky" aura pour mise en forme
position:fixed;    
    width: 100%;
    top:0px;    
    z-index: 9999; 


Je pense que c'est assez basique, mais voila, si cela peut aider. Merci à tous de vos orientations
Jluc