Bonjour,

Je vais tenter d'être le plus clair possible sur un problème qui me fait pousser les cheveux à l'envers depuis quelques temps ! Voilà, je viens de coder une barre de menu avec sous-menu html et css) et là, je me dis...tiens si je m'essayais au js afin de lui changer sa hauteur au scroll. Le résultat fonctionne à un "détail" près: le sous-menu ne s'affiche plus une fois que l'on scroll... Si une âme charitable pouvait m'aiguiller sur ce détail, ce serait merveilleux !


<nav id="menu-stick">   
      <ul id="menu">
        <li><a href="">Menu 1</a>
          <ul id="sous-menu">
            <li>sous-menu1</li>
            <li>sous-menu2</li>
            <li>sous-menu3</li>
            <li>sous-menu4</li>
          </ul>
        </li>
        <li><a href="">Menu 2</a></li>
        <li><a href="">Menu 3</a></li>
        <li><a href="">Menu 4</a></li>
      </ul>
    </nav>



nav{
  position: fixed;
  top:0;
  background:rgba(0,0,0,0.8);
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul{
  display: flex;
  align-items: center;
}

nav ul li{
  list-style: none;

}

nav a:link,nav a:visited {
  text-decoration: none;
  color:#d6d6d6;
  position: relative;
  display: block;
  font-size:1.5em;
  font-weight: 500px;
  padding:10px 25px;
  font-family: 'Raleway', sans-serif;
}

nav a:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  background-color: #ffcf3f;
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}

nav a:hover:after,
nav a:focus:after {
  opacity: 0.6;
  transform: translateY(0);
}


nav a:focus {
  outline: none;
}

#menu li:first-child{
  position: relative;
}

#sous-menu{
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
  position: absolute;
  z-index: 555555;
  padding: 0;
  left:10px;
  background: #333;
  height:0;
  overflow: hidden;
  transition: height 0.5s;
}

#sous-menu li{
  box-sizing: border-box;
  color:white;
  width:115px;
  padding:15px;
  box-shadow: 0 0 0 0 rgba(30, 144, 255,1) inset;
  transition: box-shadow 0.6s;

}

#sous-menu li:hover{
  box-shadow: 300px 0 0 0 rgba(30, 144, 255,1) inset;
}

#menu li:first-child:hover #sous-menu{
  height:216px;
}



   $(window).on('scroll', function () {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > 50) {
        $('#menu-stick').stop().animate({height: "80px"},20);     
      }
      else {
       $('#menu-stick').stop().animate({height: "120px"},20);
     }
   });

Modifié par Shupps (11 Mar 2019 - 22:16)
Bonjour,

Tout d'abord encore merci pour vos réponses. Effectivement adrien881 , étonnament le code fonctionne sur jsfiddle, le truc est effectivement sur un scroll vertical cela doit rétrécir le nav, en hauteur, qui passe de 120px à 80px et à ce moment là mon sous menu n'apparait presque plus: il ne dépasse plus le nav, je ne voit donc qu'une infime partie du sous-menu1. Je test avec chrome et firefox chez moi et même constat. Super étrange...
Modifié par Shupps (12 Mar 2019 - 14:19)
Du coup dur dur de voir ce qui ne vas pas à l'aveugle. Tu as un exemple en ligne du code qui ne marche pas ? Ca doit etre lié a ce qu'il y a autour de ce code.
Apparament c'est Jquery qui force un overflow:hidden avec le animate...

Après, tu n'as pas besoin d'un animate en Js pour juste ça. Fait juste un css("height","80px") et dans ton css tu rajoute juste transition: height 200ms;
Modifié par _laurent (12 Mar 2019 - 15:02)
ok, je me disais bien que le js ( je débute complètement avec js) y était pour quelque chose...
Modifié par Shupps (12 Mar 2019 - 15:12)
Shupps a écrit :
je débute complètement avec js

Y'a pas de soucis, par contre commencer par JQuery quand on connais pas trop le Js ça mène a certains pièges... vu que c’est un framework fait pour simplifier la vie, il prend parfois des raccourcis un peu violent pour les néophytes. Smiley smile

Shupps a écrit :
Yes, j'avais pensé à la transition, mais j'aurais voulu le faire partir au scroll...

La transition CSS partira au moment ou tu changera la hauteur, donc exactement comme le animate Js.
Je pense que tu as l'animation CSS en tête Smiley smile
Que du bonheur, _laurent my hero !! Encore merci pour tous tes conseils.

Un jour... j'y arriverai, en tout cas je bosse pour...