Cerrar video

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

por | Nov 8, 2022 | Tutorial gratuito | 2 Comentarios

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.

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

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.

Tutoriales Relacionados

2 Comentarios

  1. Jorge Salazar

    Muy buen tutorial, Oscar, y creo que bastante útil. Como siempre, muy bien explicado, con total claridad. Felicidades.

    Responder
    • Oscar Viedma

      Muchas gracias por el apoyo Jorge, esta semana haré el de agregarle una «X» al módulo para cerrarlo 😀

      Responder

Trackbacks/Pingbacks

  1. Cómo cerrar u ocultar cualquier elemento (sección, fila, módulo) de divi desde un icono "X" o un botón de cerrar sin plugins - OV DIVI - […] el tutorial gratuito anterior te enseñé a mostrar un elemento flotante al llegar a una sección. El tutorial de…

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest