MENU FIXED SCROLL CUANDO NOS DESPLAZAMOS EN LA PÁGINA CON CSS Y JQUERY

Cómo crear menú fijo Cuando Desplazamos la página con CSS y jQuery

En muchas oportunidades queremos que nuestro menu este siempre al nuestro lado cuando nos desplazamos en la web y no queremos subir de nuevo para poder cambiar de pestaña o pagina.

por ello en esta oportunidad realizaren una simple forma de implementar esto en nuestros proyectos, para ello necesitaremos de JQuery que nos ayudara en añadir clases y quitarlas (addClass, removeClass), ya me entenderán los que conocen de ello.

el objetivo es tener la navegación fija cuando el usuario se desplace por el sitio web y esta vuelva a su posición original cuando se desplace arriba.

Dejémonos de mucha palabra y vamos a la acción.

En el internet encontraran muchas variedades de poder realizar, pero estas contienen demasiado código Javascript así que que les mostrare algo más preciso y muy corto pero con la misma funcionalidad.

A empezar.

Biblioteca jQuery

Lo que necesitamos en nuestro proyecto es añadir el CDN de JQuery que se encuentra disponible en la plataforma de Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

HTML

Este contiene nuestro elemento de menú HTML, esto es sólo una simple etiqueta HTML

<section class="maincontain">
	<div class="header">
		<a href="http://innovacusco.com" title="Fixed Menu on Scroll with jQuery and CSS3">
			<h1 class="logo">Fixed Menu con jQuery and CSS3</h1>
		</a>
	</div>		
	<div class="nav-container">
		<nav class="nav">
			<ul>
				<li><a href="">HOME</a></li>
				<li><a href="">DISEÑO</a></li>
				<li><a href="">WEBSITES</a></li>
				<li><a href="">SEO</a></li>
				<li><a href="">JQUERY</a></li>
				<li><a href="">WORDPRESS</a></li>
				<li><a href="">JOOMLA</a></li>
			</ul>
			<div class="clear"></div>
		</nav>
	</div>			
	<div class="container">	
		<div class="main-content">	
			<div class="watch-me"></div> <div class="clear"></div>
			<div class="look-at-me"></div>
			<div class="the-end"></div>
		</div>
	</div>		
	<div class="maincontains">
		<p>Contenido aqui</p>
	</div>		
</section>

<div class=”nav-container”></div>: este sera el elemento que reciba el añadido y retiro de clases con JQuery
<div class=”nav”> </div>: Este campo tendrá nuestro ancho que requerimos para nuestro menu. Nuestros menús tendrán los estilos de siempre.

CSS

Para hacer que nuestro menu flote y dar a nuestra lista de menú a horizontal tenemos que añadir código CSS.

<style>
	a{color: lightblue; text-decoration: none;}
    .nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
	.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* este fracmento hace que el menu flote */
	.nav ul{margin: auto;width: 1000px;}
	.nav { height: 42px;background-color: #000;}
	.nav ul { list-style: none; }
	.nav ul li{float: left; margin-top: 6px; padding: 6px; }
	.nav ul li + li{border-left: 1px solid #ACACAC;}
	.nav ul li:first-child{ padding-left: 0;}
	.nav ul li a {color: white;text-decoration: none; }
	.nav ul li a:hover{ text-decoration: underline;}
	.maincontain{width: 1000px; margin: auto;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
	p{color: #665;}
</style>

Javascript

Este pequeño código JS contiene las principal función de nuestro menú de desplazamiento fijo.

Esto indica que si estamos en la parte superior de menos de 136 pixeles el menu esta en la posición original, pero si estamos en superior de 136 pixeles se añade la clase f-nav y con ello se aplican los estilos de esa clase que determinamos en el CSS.

<script>
jQuery("document").ready(function($){
	
	var nav = $('.nav-container');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 136) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});
});
</script>

Si tienes dudas acerca de esta desarrollo deje su duda en el campo de comentarios.