28172 sujets

CSS et mise en forme, CSS3

[Résolu] Soucis avec un menu sticky

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
Sujet clos
Aller à