Cómo mostrar un elemento flotante hasta llegar a una sección en divi sin plugins

En este tutorial gratuito aprenderás a mostrar un elemento (sección, fila, módulo) flotante hasta llegar a una sección en divi.

Esta funcionalidad siempre me la han estado solicitando y en varias ocasiones ya la he respondido pero de tan solicitada que es mejor he decido hacer un tutorial, estoy seguro que te será muy útil.

Con esta técnica que aprenderás el día de hoy vas a lograr dejar fijo un botón, un formulario de contacto, un formulario de suscripción o cualquier otro módulo de divi en cualquier área de la página, pero lo interesante es que este elemento flotante se va a mostrar hasta que lleguemos a la sección que hayamos definido, es decir, al cargar la página el elemento estará oculto pero éste se mostrará hasta que lleguemos, hagamos scroll o nos desplazemos hasta la sección correspondiente 🤩

Para lograr esta funcionalidad vamos a requerir de un pequeño fragmento de código jQuery que te comparto a continuación:

<script>
  (function($){
	$(window).scroll(function(){

	  if ($(window).scrollTop() >= $("#seccionMostrar").position().top) {
		$( ".ov-elemento-fijo" ).fadeIn();
	     } else {
		$( ".ov-elemento-fijo" ).fadeOut();
	     }

	});
})(jQuery);
</script>

También vamos a requerir de este pequeñito código CSS para ocultar el elemento al cargar la página:

body .ov-elemento-fijo {
  display: none;
}

Y esto es todo, si quieres aprender dónde pegar estos fragmentos no esperes más y dale play al video…

Un abrazo.