Cerrar video

Cómo reemplazar o cambiar el logotipo del menú en divi al hacer scroll o desplazarnos

por | Sep 15, 2020 | Tutorial gratuito | 0 Comentarios

Hola hola bienvenido bienvenida a otro nuevo tutorial. Este tutorial será muy breve y hasta cierto punto sencillo pero realmente útil ya que es algo que me han solicitado mucho y todavía no se puede realizar con divi por defecto. Estoy hablando de cambiar o reemplazar el logotipo en divi al hacer scroll o desplazarnos.

Esto es algo realmente necesario por ejemplo cuando diseñamos una sección transparente para nuestro menú pero al hacer scroll dicha sección cambia a un color de fondo, esto es necesario porque si no usamos la combinación adecuada de colores nuestro logotipo puede perderse con el fondo.

Si bien sabemos, con las nuevas opciones sticky de divi podemos hacer que los elementos de una sección cambien sus propiedades o estilos al hacer scroll, cómo por ejemplo, podemos cambiar tamaños de tipografía, de rellenos, de márgenes incluso podemos cambiar el color de cualquier elemento, pero aún sigue faltando la característica para reemplazar un logotipo o imagen al desplazarnos. Por lo tanto en este tutorial te enseñaré de forma muy práctica como lograr esta funcionalidad.

Solo vamos a requerir de este fragmento de código jquery:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 10) {
	  	$("#img-logo").addClass("cambiar-logo");
	  }

	  else{
			$("#img-logo").removeClass("cambiar-logo");  	
	  }
  });
});

Y de este otro código CSS:

.cambiar-logo img {
  content: url(enlace_imagen);
}

Ya no esperes más y dale play al video para que sepas dónde y cómo colocar estos fragmentos…

0 comentarios

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.

$6 USD / mes

Pin It on Pinterest