Al hilo mis últimos posts, hoy seguimos viendo truquitos para hacer que tu web mole aún más. Vamos a ver cómo hacer para que, llegando con el scroll vertical a cierto punto, un elemento se quede fijo y te acompañe en el resto de tu navegación por la página.
Antes de explicar cómo hacerlo, hay algo mucho más importante: Por qué hacerlo.
Por qué fijar un elemento en la parte superior cuando hacemos scroll
Hay infinitas razones por las que nos puede interesar dejar un elemento fijo al hacer scroll en nuestra web. No obstante, una de las razones más extendidas en caso de webs corporativas o tiendas online es hacerlo por interés comercial.
Imagina que tienes una oferta espectacular y quieres que el usuario la vea sí o sí. Pero como bien sabemos, la mayoría de usuarios no se paran a leer los contenidos de una web, a no ser que estén muy muy muy interesados. Sin embargo, si hay un elemento que no se comporta como el resto, sino que cuando aparece se queda fijo en la pantalla, sí que despertará curiosidad y centrará el foco de atención del usuario, mejorando de esta forma la conversión en tu web.
Mirad cómo nuestra oferta pasa de largo
Fijar un elemento en la parte superior cuando hacemos scroll con jQuery
Vamos a conseguirlo con la ayuda del amigo Anthony Garand, un desarrollador front-end con cara de buena gente.
Pues bien, Anthony desarrolló en 2011 un código que vamos a enchufar en alguna carpeta de nuestra web, recomendamos que si estás trabajando en WordPress con themes child lo introduzcas ahí, porque será una carpeta que permanecerá igual siempre, independientemente de las actualizaciones.
Imagino que os estaréis preguntando por ese código, pues bien en este enlace de github encontraremos todo el código que necesitamos copiar y pegar en un nuevo documento .js al que llamaremos “jquery.sticky.js”, que será el que meteremos en nuestra web.
Como yo estoy trabajando con WordPress, voy a crear una carpeta dentro de mi themechild a la que llamaré “js” en referencia al contenido que tendrá (archivos javascript), y ahí arrastro el bonito archivo que hemos creado copiando el código de Anthony.
Lo siguiente que vamos a hacer es pillar la id (o dársela si no tuviera) del elemento que queremos fijar (por ejemplo #mi_super_oferta), e introducir un par de pequeños scripts en el head de nuestra página:
<script src=”/wp-content/themes/ime/js/jquery.sticky.js”></script> <script> $(document).ready(function(){ $(“#mi_super_oferta “).sticky({topSpacing:0}); }); </script>
El primero hace una llamada a la carga del documento que acabamos de crear, y el segundo aplica la magia sobre el elemento con la id #mi_super_oferta.
Para fijarlo a la parte inferior cambiaríamos “topSpacing” por “bottomSpacing”.
Extra tip para fijar un elemento en la parte superior cuando hacemos scroll con jQuery si estás trabajando en WordPress
Si estuviéramos trabajando con WordPress y no nos funcionara, es probable que sea por que para llamar a jQuery dentro de WordPress no podemos utilizar el símbolo “$”. En su lugar vamos a usar “jQuery”:
<script src=”/wp-content/themes/ime/js/jquery.sticky.js”></script> <script> jQuery(document).ready(function(){ jQuery(“#mi_super_oferta “).sticky({topSpacing:0}); }); </script>
Mirad ahora cómo nuestra oferta llama nuestra atención:
Y así es como conseguimos hacer que algo se quede fijo y llame la atención de nuestro usuario y potencial cliente. Sencillo ¿no?
Hola, antes que nada te agradezco por el apoyo, la verdad me sirvió mucho tu explicación sólo que tengo un problema. Al iniciar la página, se modifica el heigth de mi nav ya que de manera automática se agrega el height en la propiedad style del div nuevo que se genera. He intentado quitarlo pero no he tenido exito, ¿sabes cómo puedo hacerlo?