Seleccionar página

Esta es una de esas cosas que un cliente es raro que pida, pero que cuando te las piden, te partes la cabeza para averiguar cómo narices se hace.

Pongámonos en situación. Queremos que, cuando el usuario esté bajando por nuestra página, ocurra una acción cuando llegue a un punto concreto. En nuestro ejemplo, el header empieza en la zona baja de la web, y al ir bajando la vista (“scroll down“), este va subiendo. Cuando llega arriba, debe quedarse fijo arriba. El siguiente esquema lo explica un poco mejor. Tened en cuenta que cuando cargamos la página, lo primero que ve nuestro usuario es el recuadro azul y el header abajo, no ve más:

esquema

Para esto utilizaremos HTML, CSS y JavaScript/jQuery.

Antes de empezar

Vale, tengamos en cuenta una cosa. Cada pantalla es diferente. No podemos pensar que quien va a ver nuestra web tendrá la misma resolución que nosotros. Así que no podemos hacer esto con números fijos, no podemos decir “cuando se llegue a 800px de altura, que ocurra esto”. Salvo que realmente queramos que así sea, claro, por cualquier motivo. Podemos hacer que ocurra cuando lleguemos al final de un div concreto.

La estructura HTML

Para simular que el usuario llega al final de su monitor, nosotros tenemos un div con una imagen que ocupa el 100% de ancho y alto de la pantalla, tengamos la resolución que tengamos. Debajo, tendremos el #header preparado, que al cargar la página está debajo del primer bloque.

En nuestro ejemplo, tenemos dos elementos uno sobre otro. El primero es un div con id #top-home, y ocupa, como ya hemos dicho, toda la pantalla. El segundo es un header, al que pondremos de id simplemente #header para poder referirnos más tarde a él con jQuery.

Debajo evidentemente habrá otros divs con más información (¡si no no podríamos hacer scroll hacia abajo!)

El estilo CSS

El truco consistirá en añadir a #header una clase específica, av_header_effect, cuando alcancemos una cierta altura en la página. Así pues, esta clase simplemente debe contener:

Simple y para toda la familia. Jugamos con el valor de top si queremos que se posicione algo más abajo de lo normal.

La magia con jQuery

Ahora llega la parte mágica del asunto. Hasta ahora, si hacíamos scroll arriba y abajo, el header, como cualquier otro elemento, subia y bajaba en su posición. Tenemos que aplicar el siguiente script:

Lo primero es definir una variable auxiliar que nos ayudará a evitar que se repita la acción de añadir la clase cuando ya está añadida.

Dentro del bloque jQuery(document).ready, ponemos especial atención a la acción de scroll. Cuando se hace scroll en la página, se comprueba la posición a la que el lector ha bajado (con $(window).scrollTop()), y se compara con la altura del bloque #top-home. Si la posición es mayor al 90% de la altura de #top-home, debemos añadir la clase av_header_effect. Para que esto no se repita cada vez que el usuario siga bajando y siga aumentando $(window).scrollTop(), usamos el booleano withClass. Si es falso, añadimos la clase y lo ponemos a verdadero.

Claro, ocurre que nuestro lector puede querer volver arriba. En ese caso, comprobamos que la posición $(window).scrollTop() sea menor que el 90% de la altura de #top-home, y eliminamos la clase av_header_effect (y ponemos withClass de nuevo a false).

¿Por qué el 90%? Podéis jugar con este valor (multiplicar por 0.9 es obtener el 90% de la altura) para que ocurra antes o después. Un buen momento ronda el 90%, ya que si lo dejamos al 100% de la altura completa, el efecto se verá algo más raro, pues el bloque #top-home tiene que perderse arriba completamente para que se ejecute esto. A veces eso origina que parte del header se pierda también. Una solución es ejecutar todo esto cuando estamos llegando al final, es decir, al 90%, o más. Pero si no os convence, simplemente eliminad la multiplicación.

Otras aplicaciones

Nuestro pequeño truco con jQuery tiene otras aplicaciones útiles, como por ejemplo, crear un scroll infinito de elementos con ajax. Cuando lleguemos a ese 90%, pedimos por ajax a nuestra base de datos más elementos a cargar, y los añadimos al contenedor. Habría que añadirlos al contenedor que estamos comprobando para ejecutar la acción (en nuestro caso, #top-home) de forma que su altura se incremente, y haya un nuevo valor de altura para comparar. También es interesante tener una variable auxiliar para que no haya más peticiones mientras Ajax esté procesando la información y cargando los nuevos datos; de lo contrario, seguir bajando con la rueda del ratón creará muchas peticiones a Ajax simultáneas cuando aun no nos ha devuelto ni la primera.