Menu only appears on scroll up

Question

Good afternoon, someone can exemplify a script to make the menu of a particular Website only appear when we scroll up?

Here is my menu

ul.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #223A5E; /* cor bck menu*/
    position: fixed;
    width: 100%;
    height: 2.5vw;
    z-index: 101;
}

.menu li {
    float: left;
}

 li a, .sub {
    display: inline-block
    text-decoration: none;
}

.menu li a:hover, .submenu:hover .sub {
    color:#f1e3dd;
}

.menu li.submenu {
    display: inline-block;
}

.sub-content {
    display: none;
    position: absolute;
    background-color: #223A5E; /* cor bck submenu */
    min-width: 8vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu a {
    position: relative;
    display: block;
    padding: 0.8vw 0.5vw;
    margin: 0 0.5vw;
    letter-spacing: 2px;
    font-size: 1vw;
    line-height: 0.8vw;
    font-weight: 900;
    color: #87bdd8;    /* cor letras menu */
    text-decoration: none;
    text-align: left;
}


.submenu:hover .sub-content {
    display: block;
}

.login{
    display:inline;
}

.login li{
    float: right;
}

#brain{
    float: left;
    width: 3vw;
    height:auto;
}
#nome{
    display: none;
    float: right;
}

#area-socio{
    display: none;
    padding-top: 0.2vw;
    float: right;
    width: 1.5vw;
    height: auto;
}

#logout{
    display: none;
    float: right;
}



/* Faz aparecer o sublinhado no menu quando o rato passa por cima */

.menu a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #f1e3dd;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}

.menu a:hover::before, a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

  <!-- Menu -->
   
    <ul class="menu">
        <img id="brain" src="imgs\brain.png"> 
        <li class="submenu"><a href="#tituloinfo" class="sub">Conferência</a>
            <div class="sub-content">
                <a href="#infoprimeiro">Informações Gerais</a>
                <a href="#infosegundo">Sessões Anterirores</a>
            </div>
        </li>
        <li><a href="#titulosubmete">Artigos</a></li>
        <li ><a href="#tituloprograma" class="sub">Programas</a></li>
        <li><a href="#titulogaleria">Galeria</a></li>
        
        
        
  <div class="login">
        <li id="socio" onclick="document.getElementById('loginpop').style.display='block' ; document.getElementById('registopop').style.display='none'"><a href="#login">Login</a></li>
        <li id="socio2" onclick="document.getElementById('registopop').style.display='block'; document.getElementById('loginpop').style.display='none'"><a href="#registo">Registo</a></li>
    </div>
        <li id="logout" onclick=" document.getElementById('socio').style.display = 'inline-block'; document.getElementById('socio2').style.display = 'inline-block'; document.getElementById('area-socio').style.display = 'none'; document.getElementById('logout').style.display = 'none'; document.getElementById('nome').style.display = 'none';"><a>Log Out</a></li>
        <li id="nome"><a>User</a></li>
        <img id="area-socio" src="imgs/area-socio.png">
    </ul> 

Answer 1

Good morning!!

$(document).ready(function(){
   $(window).on('scroll', function(){
      if(scrollY > 100){
         $('.navbar-header').addClass('scrolled');
      } else{
         $('.navbar-header').removeClass('scrolled');
      }
   });
});

In this script I add any class when the scroll is greater than 100. Since the idea is only in scroll up, you can set a variable to save the values to scrollar and, instead of checking if the value of Scrolly is greater than a specific value, check if Scrolly is smaller than the set variable (if smaller, it’s scroll up xD).

Hope I helped, hugs!