0

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>

4
  • 1
    ¿Dónde está tu código?
    – user7176
    el 25 abr. 2018 a las 12:03
  • Si añades el código de tu menú podremos ayudarte a encontrar una solución y será una mejor explicación de lo que estás intentando el 25 abr. 2018 a las 13:16
  • Sí perdonad, es que el código es bastante engorroso. He editado la pregunta con lo que pienso que es relevante para entender lo que tengo.
    – Jesuskin
    el 26 abr. 2018 a las 7:39
  • Buenos días, quería comentar que ya lo he podido solucionar. Un saludo.
    – Jesuskin
    el 27 abr. 2018 a las 9:59

1 respuesta 1

0

Al final los scripts que he usado para solucionarlo son los siguientes, por si a alguien le ayuda:

<script>
	if($(window).width() > 1024){
		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>
	
	<script>
		// When the user scrolls down 20px from the top of the document, slide down the navbar
		if($(window).width() <= 1024){
			var prevScrollpos = window.pageYOffset;
			window.onscroll = function() {
			var currentScrollPos = window.pageYOffset;
			  if (prevScrollpos > currentScrollPos) {
				document.getElementById("menu").style.top = "0";
			  } else {
				document.getElementById("menu").style.top = "-350px";
			  }
			  prevScrollpos = currentScrollPos;
			}
		}
	</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.