Menu de navegacion pegajoso con deslizamiento |

Uno de los efectos mas interesantes en menús de navegación es el famoso formato sticky o también conocido como menú pegajoso. Esto nos permite tener el menú de navegación (o cualquier otro elemento) donde queramos, pero al momento de scrollear y bajar en la pagina al llegar a su tope el menú quedara pegado a este por lo que en todo momento estará en pantalla.

Para comenzar tenemos que hacer la estructura básica del header y del menú.También es importante que recuerdes que para este menú tenemos que tener algo arriba de el, en este caso un logotipo.

La estructura html

<header>
		<div class="contenedor">
			<div class="logo">
				<img src="http://dummyimage.com/200x100/000/fff&text=LOGO" alt="">
			</div>
			<nav class="menu">
				<ul>
					<li><a href="#">Inicio</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Proyectos</a></li>
					<li><a href="#">Trabajos</a></li>
					<li><a href="#">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>

</div>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Proyectos</a></li>

<li><a href="#">Trabajos</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

</div>

</header>

Como puedes ver en el header, hemos colocado un contenedor para el logotipo y el menu con una clase llamada .contenedor esta clase la usaremos para centrar los elementos del menú.

Después del header es importante que tengas contenido para que aparezca un scroll y puedas bajar en la pagina para ver el menú en acción.
Código CSS

.contenedor {
	width: 95%;
	max-width:1000px;
	margin:auto;
}
 
.contenedor p {
	margin-bottom:40px;
}
 
header nav {
	background:#3498db;
	margin-bottom:10px;
}
 
header nav ul {
	list-style: none;
	overflow: hidden;
}
 
header nav ul li {
	float: left;
}
 
header nav ul li a {
	display: block;
	padding:20px;
	color:#fff;
	text-decoration: none;
}
 
header nav ul li a:hover {
	background:#2980b9;
}
 
 
/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menu-fixed {
	position:fixed;
	z-index:1000;
	top:0;
	max-width:1000px;
	width:100%;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

.contenedor {

width: 95%;

max-width:1000px;

margin:auto;

}

.contenedor p {

margin-bottom:40px;

}

header nav {

background:#3498db;

margin-bottom:10px;

}

header nav ul {

list-style: none;

overflow: hidden;

}

header nav ul li {

float: left;

}

header nav ul li a {

display: block;

padding:20px;

color:#fff;

text-decoration: none;

}

header nav ul li a:hover {

background:#2980b9;

}

/* --- Clase que agregaremos cuando el usuario haga scroll --- */

.menu-fixed {

position:fixed;

z-index:1000;

top:0;

max-width:1000px;

width:100%;

box-shadow:0px 4px 3px rgba(0,0,0,.5);

}

Lo importante en este código CSS es que al final tenemos la clase .menu-fixed esta clase no nos sirve de momento, pero lo que vamos a hacer con ella es que cuando el usuario haga scroll y baje en la pagina, al llegar a cierto punto le diremos con jquery que agregue esta clase a nuestro nav. Esta clase lo que nos permite es posicionar el menú fijo a pantalla en lo mas alto de la pagina, esta clase nos sirve para ver cual sera el estado del menú al hacer scroll y llegar a determinado punto.

Esta clase la puedes agregar al nav si quieres probar como se vería y/o editar los estilos, pero recuerda que la debes de borrar cuando termines de probarla o trabajar con ella.
Lo siguiente es hacer es agregarle la clase .menu-fixed al menú una vez que llegue a determinado punto. Cual es ese determinado punto? Bueno pues cuando la posición del scroll llegue al inicio del menú. Lo haremos con una condicional.

Código Jquery

$(document).ready(function(){
	var altura = $('.menu').offset().top;
	
	$(window).on('scroll', function(){
		if ( $(window).scrollTop() &gt; altura ){
			$('.menu').addClass('menu-fixed');
		} else {
			$('.menu').removeClass('menu-fixed');
		}
	});
 
});

$(document).ready(function(){

var altura = $('.menu').offset().top;

$(window).on('scroll', function(){

if ( $(window).scrollTop() > altura ){

$('.menu').addClass('menu-fixed');

} else {

$('.menu').removeClass('menu-fixed');

}

});

El codigo es sencillo, pero vamos por partes, primero queremos saber la distancia entre el menu y la parte mas alta de la pagina, asi que guardamos en una variable llamada altura este dato, para sacarlo hacemos uso del objeto offset.

Después vamos a ejecutar un evento, cada que el usuario haga scroll, es decir tanto si baja en pagina o si sube. Cada que haga scroll y ejecutemos este evento vamos a lanzar una condicional que revisara si la posición del scroll es mayor a la altura, si es asi, agregara la clase .menu-fixed, de lo contrario la va a quitar, para que el menú regrese a su posición original.

Y con esto tendríamos nuestro menú de navegacion listo. Recuerda que con la clase .menu-fixed puedes hacer lo que quieras, puedes hacer que al bajar en la pagina el menu se quede pegado pero que tenga el 100% de ancho, para eso a nuestra clase .menu-fixed le haríamos las siguientes modificaciones:

.menu-fixed {
	position:fixed;
	z-index:1000;
	top:0;
	/*max-width:1000px;*/
	left:0;
	width:100%;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

.menu-fixed {

position:fixed;

z-index:1000;

top:0;

/*max-width:1000px;*/

left:0;

width:100%;

box-shadow:0px 4px 3px rgba(0,0,0,.5);

}

Agregamos un left:0; y le quitamos la restricción del ancho max-width:.

Recurso: http://code.jquery.com/jquery-latest.js
Demo: demo.

[Total:0 Promedio:0/5]

facebook Menu de navegacion pegajoso con deslizamiento

twitter Menu de navegacion pegajoso con deslizamiento

google Menu de navegacion pegajoso con deslizamiento

diggit Menu de navegacion pegajoso con deslizamiento

pinterest Menu de navegacion pegajoso con deslizamiento

linkedin Menu de navegacion pegajoso con deslizamiento

print Menu de navegacion pegajoso con deslizamiento

email Menu de navegacion pegajoso con deslizamiento

Comparte el articulo.

Menu de navegacion pegajoso con deslizamiento

Agregar comentario

Cancelar respuesta

Suscribete

Tu suscripción a sido realizada con éxito.