Divi | Swap/change the Divi header logo on fixed header (After Scroll)

divi-logo-swap.js

(function($) {
	$(window).on('scroll', function() {
		if(jQuery('#main-header').hasClass("et-fixed-header")) {
			jQuery('#logo').attr('src','/wp-content/uploads/logo-alt.png');
		}
		else {
			jQuery('#logo').attr('src','/wp-content/uploads/logo.png');
		}
	});
})( jQuery );

You can swap what logo shows up in the header, on the Divi theme, by using the following CSS. You will need to set your default logo in the normal theme options, and then add similar CSS as shown below. It will use CSS to swap the logo image’s URL if/when the header is fixed.

img#logo {
content: url(/wp-content/uploads/logo.png);
}
.et-fixed-header img#logo {
content: url(/wp-content/uploads/logo-alt.png);
}

NOTE: The above CSS method does NOT work in IE, Edge, or Firefox. For this reason, it may be best to instead use the jQuery method in this Gist.

The jQuery method works by checking (on scroll) if the header is normal, or fixed. If the header has Divi’s et-fixed-header class (which is what happens when the header is sticky/floating at the top of the viewport), then it will use the “alt” logo. Otherwise, it will use the normal logo. Note you will need to set the normal logo in both theme options and then again in the “else” area of the jQuery script. This is to ensure it switches back to the normal logo when the header is no longer fixed.

Ensure you add that jQuery script to the Header Footer (in the Footer area) plugin, and wrap it in script tags... or wherever you would rather add your Javascript.

but if we use javascript, the problem is "during loading of the site the logo will be of divi"...