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.

Menu de navegacion pegajoso con deslizamiento

Agregar comentario

Cancelar respuesta