Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.

...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.

<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:

#menu



position:fixed;

bottom:0;

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.

$('#seccion_1') .waypoint(function(direction) 

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.

$('#seccion_1') .waypoint(function(direction) 

$('#menu_seccion1').addClass('menu_active');

Menús con scroll