Hace unos días los chic@s de Thrive Themes nos sorprendieron con una nueva funcionalidad para poder controlar el comportamiento de ciertos elementos de Thrive Architect cuando el usuario realiza scroll en nuestra página.
Con esta opción podremos adherir un elemento a la pantalla aunque el mismo no esté insertado en dicha sección.
Esto quiere decir que el elemento seguirá visible en la pantalla mientras nuestros usuarios siguen desplazándose hacia abajo en la misma.
Ahora mismo la funcionalidad Scroll Behavior está disponible para los elementos botón e imagen y para los elementos de tipo contenedor como el content box, el background section o las columnas.
No obstante, podremos usar esta funcionalidad con todos los elementos de Thrive Architect insertando los mismos dentro de un content box y aplicando dicha funcionalidad al content box en cuestión.
Para saber más sobre el funcionamiento de la funcionalidad Scroll Behavior puedes pasarte por la clase de Scroll Behavior que encontrarás en el curso de Thrive de Thrive Themes.
Ejemplo de diseño realizado con Scroll Behavior
En el vídeo de arriba puedes ver un ejemplo de como se aplica esta funcionalidad en un diseño para una hamburguesería.
Para realizar dicho diseño he cogido las imágenes en formato .png (transparentes) y las he insertado en diferentes columnas.
Las columnas que he insertado son de 2/3 por 1/3 para insertar la imagen en grande en la parte izquierda y el texto en la parte derecha.
Ahora le he colocado a todas las imágenes la funcionalidad Scroll Behavior hasta el fin de la página y he ido jugando con los píxeles para establecer la distancia que habrá en la parte superior de la imagen mientras se vaya desplazando el usuario.
Los píxeles han quedado de la siguiente manera:
Bien es cierto, que con estos porcentajes conseguimos la altura idónea para que los alimentos estén bien posicionados dentro de la hamburguesa pero se nos irán colocando uno encima de otro por lo que la hamburguesa no se verá bien.
Para jugar con las posiciones tendremos que modificar la posición z-index de las imágenes.
En este caso he puesto los siguientes valores:
Si no sabes cómo funciona la propiedad z-index puedes ampliar información en la clase de superposición de capas del curso de Thrive Themes.
Conclusión
Como has podido observar con unas pequeñas configuraciones podemos conseguir diseños realmente profesionales.
Lo que te he enseñado en esta publicación sólo es una parte de lo que se puede hacer con la funcionalidad Scroll Behavior que han incorporado a Thrive Architect.
Si quieres sacarle más partido a tus diseños y aprender a realizar diseños como el del vídeo presentación te animo a pasarte por el curso de Thrive Themes.
Si te quedara alguna duda puedes hacérmela llegar por medio de un comentario en esta misma publicación.
Un abrazo y buen networking 
!!
