Tengo un menú de navegación el cual, si tengo pantallas menores a 1024, los índices los agrupo en un hamburger icon. Este menú en un navegador web en PC lo tengo de tal manera que al hacer scroll down desaparece, y reaparece al pasar el mouse por el top de la página, escondiendose otra vez si el mouse deja de estar en el top.
A partir de esto, lo que intento hacer es lo siguiente:
En pantallas menores a 1024(cuando los índices se agrupan en un hamburger icon), quiero que el menú pase de mostrarse como lo hace ahora, a que se muestre al hacer scroll up y desaparezca al hacer scroll down.
Manteniendo así las 2 funcionalidades, para dispositivos grandes usar la opción que ya tengo, y para más pequeños usar la que quiero implementar.
Muchas gracias por adelantado. Un saludo.
Dejo el código que pienso es relevante y que se refiere a la pregunta:
.cabecera{
width: auto;
height: 193px;
background-color: #4a4a4a/*19*/;
font-weight: 300px;
line-height: 1 !important;
padding-top: 0px;
z-index: 10000;
position: fixed !important;
}
/*Para el hamburger Icon*/
.hamburgerContainer {
top:-50px;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #ffffff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<nav class="navbar navbar-expand-sm col-sm-12 cabecera nav-down" style="padding:0px;">
<div class="col-xl-2 col-6">
<a href="#index">
<img src="carpeta\logos\Logo-01.png" height="193px" width="193px">
</a>
</div>
<div class="col-xl-4 d-none d-xl-block">
<p class="cabeceraH">titulo<br>
titulo<br>
titulo<br>
titulo</p>
</div>
<div class="col-xl-6 d-none d-xl-block" style="padding-bottom:150px;">
<ul class="navbar-nav">
<li class="col-sm-3 nav-item">
<a class="cabeceraH nav-link" href="#investigacion">Investigación</a>
</li>
<li class="col-sm-3 nav-item">
<a class="cabeceraH nav-link" href="#miembros">Miembros</a>
</li>
<li class="col-sm-3 nav-item">
<a class="cabeceraH nav-link" href="#docencia">Docencia</a>
</li>
<li class="col-sm-3 nav-item">
<a class="cabeceraH nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
<div id="hamburger" class="col-6 d-xl-none hamburgerContainer" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myDropdown" class="dropdown-content">
<a class="cabeceraH nav-link" href="#investigacion">Investigación</a>
<a class="cabeceraH nav-link" href="#miembros">Miembros</a>
<a class="cabeceraH nav-link" href="#docencia">Docencia</a>
<a class="cabeceraH nav-link" href="#contacto">Contacto</a>
</div>
</div>
<nav>
<!--Script para que el menú/navbar aparezca cuando poner el mouse en el top de la página-->
<script>
var mouseY = 0;
document.addEventListener('mousemove', function(e) {
mouseY = e.clientY || e.pageY;
if(mouseY < 70) {
$('nav').css({ top: '0' });
}
}, false);
$(window).scroll(function() {
var sc = ($(this).scrollTop() > 193) ? $('nav').css({ top: '-193px' }) : $('nav').css({ top: '0' });
});
$('nav').mouseout(function() {
if($(window).scrollTop() > 193) {
$('nav').css({ top: '-193px' });
}
});
</script>
<!--Para el hamburger Icon-->
<script>
function myFunction(x) {
x.classList.toggle("change");
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
<script>
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.hamburgerContainer')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
document.getElementById("hamburger").classList.toggle("change");
}
}
}
}
</script>
Estaba intentando hacer algo como lo siguiente:
<!--Script para un scroll-menu en tablets y moviles(No funciona)-->
<script>
$(window).resize(function() {
if($(window).width() <= 1024){
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}
}
</script>