Good afternoon, can someone give me an example of a script to make the menu of a certain website only appear when we scroll up?
Here's 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>