¿Alguna vez has navegado por una página web y te ha molestado tener que desplazarte hacia arriba cada vez que quieres acceder al menú? Si es así, ¡tenemos una solución para ti! En este artículo te mostraremos cómo puedes mostrar u ocultar tu menú mientras te desplazas por tu página web, con el fin de mejorar la experiencia de usuario y facilitar la navegación. ¡Sigue leyendo para descubrir cómo hacerlo!
Es posible que haya notado que en algunas páginas web, a medida que desplazarse hacia arriba y hacia abajo la página, pueden aparecer varios menús en la parte superior, inferior o lateral de la página. En este tutorial, vamos a cubrir cómo mostrar y ocultar un menú dependiendo de dónde se encuentre el usuario en la pantalla.
Podemos aprovechar algo de código jQuery para simplificar esto. El ejemplo que se muestra a continuación Deberia trabajar en todos los principales navegadores, como Internet Explorer, Chrome, Firefox, Safari y Opera.
Ejemplo
El siguiente ejemplo dará como resultado un submenú que aparece en la parte superior de la pantalla del espectador una vez que el usuario se desplaza hacia abajo a una determinada parte de la página web. Se abrirá una nueva página y puede usar el mouse para desplazarse hacia arriba y hacia abajo en la página.
Una vez tú desplazarse hacia abajo hasta cierto punto de la página, el encabezado ya no será visible y el código jQuery mostrará el submenú. Como tu desplazarse hacia arriba, el submenú se ocultará cuando el encabezado aparezca en la pantalla. Puede controlar cuándo se muestra el submenú modificando esta parte del código jQuery var headerBottom = headerTop + 120;.
Si usted aumentar el número, está configurando el submenú para que se muestre u oculte cuando se desplace hacia abajo en la página. El submenú se puede mostrar en cualquier lugar en la página modificando las propiedades de estilo CSS apropiadas.
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Sub-Menu Demo</title>
<style>
html, body {
margin:0;
padding:0;
width:100%;
font-size:1em;
color:#ffffff;
}
#header {
height:80px;
background:#1240AB;
padding:20px;
font-size:3em;
border-bottom:3px solid #4671D5;
}
#subMenu {
height:50px;
width:inherit;
background:#6c8cd5;
display:none;
position:fixed;
top:0;
left:0;
z-index:500;
opacity:.9;
padding:15px;
font-size:2.5em;
}
#content {
margin:20px;
font-size:2.25em;
color:#232323;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="header">Welcome to my website!</div>
<div id="subMenu">Some menu links, social icons could go here...</div>
<div id="content">
<!-- Your HTML Content -->
</div>
<script>
$(document).ready(function() {
var headerTop = $('#header').offset().top;
var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
if (($("#subMenu").is(":visible") === false)) {
$('#subMenu').fadeIn('slow');
}
} else {
if ($("#subMenu").is(":visible")) {
$('#subMenu').hide();
}
}
});
});
</script>
</body>
</html>