os comento, estoy haciendo en mi portafolio un menú de navegación que cuando hagas scroll hacia abajo, éste quede fijo en la parte superior de la pantalla. El tema es que este menú de navegación fijo que se crea al scrollear hacia abajo, no lo quiero en la vista de móvil, y para ello estoy usando el siguiente código de HTML Y JS.
HTML) <div id="barra_nav">
<a href="#about-me">Sobre mí </a>
<a href="#servicios">Skills</a>
<a href="#portafolio">Portafolio</a>
<a href="#contacta">Contacta conmigo</a>
</div>
JS
window.addEventListener('scroll', ()=>{
var navegador = document.getElementById('barra_nav');
var scroll = window.scrollY;
var texto_nav = document.querySelectorAll("#barra_nav a");
if(scroll>500){
navegador.style.position ='fixed'
navegador.style.top = '0';
navegador.style.display = 'flex';
navegador.style.justifyContent = 'space-around'
navegador.style.width = "100%";
navegador.style.backgroundColor = 'var(--negro)'
navegador.style.color = '#fff'
navegador.style.zIndex = '99999';
navegador.style.transition = '1s ease-in';
navegador.style.left='0';
navegador.style.padding= .8+"rem";
navegador.style.boxShadow='0 5px 10px var(--secundario)';
navegador.style.margin=0;
for (let i = 0; i<texto_nav.length;i++){
texto_nav[i].style.fontWeight='300';
texto_nav[i].style.color='var(--parrafos)';
}
if (window.innerWidth < 510){
navegador.className="vacio";
}
}
else{
navegador.style.position ='relative'
navegador.style.display = 'block';
navegador.style.width = "100%";
navegador.style.transition = '.1s';
navegador.style.padding=0;
navegador.style.marginTop=2+"rem";
navegador.style.color = '#ffffff'
navegador.style.backgroundColor = 'transparent'
navegador.style.zIndex = '99999';
navegador.style.boxShadow='none';
for (let i = 0; i<texto_nav.length;i++){
texto_nav[i].style.fontWeight='300';
texto_nav[i].style.color='var(--oscuro)'
}
if (window.innerWidth < 510){
navegador.style.marginTop=0;
}
}
});
CSS)
.vacio{
display: none;}
Lo importante del código Javascript es la parte concreta de
if (window.innerWidth < 510){
navegador.className="vacio";
}
Básicamente ahí la idea es, si mi ventana es menor a esos 510px, mi menú de navegación va a tener una clase que será vacio ya hecha en CSS, que lo que hace es un simple display none.
Pero no me está quitando el menú de navegación. La sintaxis yo creo que es la correcta, porque en el else
estoy haciendo algo parecido con navegador.style.marginTop=0;
Y eso lo está cogiendo sin problemas.
Alguna idea?
EDITO
Adjunto capturas de como está actualmente, no lo hago con CSS porque no sé plantearlo con los media, no se trata de en vista de PC que salga el menú y en vista de móvil no, ambos menús situados en el header tienen que estar, la única diferencia es que el menú fijo que creo con JS, no lo quiero en vista de smartphone.
VISTA PC
VISTA MÓVIL
@media
de CSS?@media
creo que es mas sencillo