J'ai un bon menu sur mon site Web. Sur les appareils mobiles et petits, le menu de droite chevauche le contenu.

J'essaie de cacher le bon menu lorsque la page était stable. Une fois que l'utilisateur fait défiler, le menu doit apparaître. Si le défilement s'arrête, je dois également masquer le menu. Je n'ai qu'à le montrer pendant le défilement.

Normalement, nous utilisons la fonction ci-dessous plutôt que toute autre solution pour mon problème:

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.a').fadeIn();
  } else {
    $('.a').fadeOut();
  }
});

J'ai trouvé une autre solution pour cela ..

 $(window).scroll($.debounce( 250, true, function(){
            $('.icon-bar-left').show();
            $('.icon-bar-right-arrow').hide();
        } ) );
0
krish 11 avril 2018 à 13:03

3 réponses

Meilleure réponse
$(window).scroll($.debounce( 250, true, function(){ $('.icon-bar-left').show(); $('.icon-bar-right-arrow').hide(); } ) );

Cela a été trouvé sur le web et ça marche bien ..

0
krish 8 mai 2018 à 05:59

Essayez ce code ou testez-le sur ce Codepen

JS:

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.menu').addClass('visible');
  } else {
    $('.menu').removeClass('visible');
  }
});

CSS:

.menu {
  position:fixed;
  top:0;
  opacity:0;
}
.menu.visible {
  opacity:1;
}

Bien sûr, vous devez également utiliser les médias-requêtes dans votre CSS, mais pour l'instant je veux juste aider avec JS et vous donner l'idée d'utiliser la classe "visible".

0
Alexander Z 11 avril 2018 à 10:24

Votre solution n'est pas correcte. Créez une icône de menu (barres) et affichez par défaut les résolutions dont vous avez besoin, par exemple:

@media only screen and (max-width: 600px) {
   .menu {
        display: none
    }
    .menu-icon {
      display: block;  
    }
}
@media only screen and (min-width: 600px) {
   .menu {
        display: block;
    }
    .menu-icon {
      display: block;  
    }

}

Et avec JS, mettez un événement pour l'icône et le menu à bascule. Une fois que l'utilisateur a cliqué sur un élément du menu, le menu se réduira.

Il s'agit d'un moyen standard d'implémenter un menu réactif.

0
Carnaru Valentin 11 avril 2018 à 10:14