Menú lateral flotante con jQuery

En ocasiones el contenido de una página es muy extenso, haciendo que nuestro menú principal o lateral queden al inicio de la página, teniendo que hacer scroll de regreso para acceder a este menú. Algo muy tedioso al navegar en un sitio web.

Una forma de solucionar esto, es tener un menú que se mantenga en la misma posición al momento de hacer el scroll hacia abajo. Existen varias formas de hacerlo, pero una de las más fáciles y retrocompatibles con navegadores viejos es con jQuery.

Lo primero que necesitamos es nuestra estructura básica en html:

<div id="wrapper">
	<header>
		<!-- Contenido del header -->
	</header>
	<div id="wrap">
		<div id="sidebar">
			<!-- Contenido del menu lateral -->
		</div>
		<div id="content">
			<!-- Contenido de la página -->
		</div>
	</div>
</div>

Ahora aplicamos los estilos en css para acomodar los elementos:

#wrapper{
	margin:0 auto;
	width:800px;
}
header{
	background:#666;
	border-radius:0 0 10px 10px;
	padding:20px;
}
#wrap{
	background:#666;
	border-radius:10px;
	float:right;
	margin:20px 0;
	width:580px;
}
#sidebar{
	background:#666;
	border-radius:10px;
	float:left;
	margin-left:-220px;
	padding:20px;
	width:160px;
}
#content{
	float:right;
	padding:20px;
	text-align:justify;
	width:540px;
}

A continuación agregamos la librería jQuery:

<script src="jquery.js"></script>

Y por último agregamos la función que validará cuando hagamos scroll y colocará el menú en una posición fija:

<script type="text/javascript">
	$(document).ready(function(){
		var sidebartop = $('#sidebar').offset().top;
		$(window).scroll(function(){
			if( $(window).scrollTop() > sidebartop ) {
				$('#sidebar').css({position: 'fixed', top: '20px'});
			} else {
				$('#sidebar').css({position: 'static'});
			}
		});
	});
</script>

Como puedes ver, es muy sencillo hacer nuestro menú flotante y ponerlo al alcance desde cualquier parte de nuestra página.