Add fading background on body in Elementor Pro

javascript.html

<script type="text/javascript">
let faders = [...document.querySelectorAll('section[data-background]')].reverse();
	function Utils() {

	}
	Utils.prototype = {
			constructor: Utils,
			isElementInView: function (element, fullyInView) {
					var pageTop = jQuery(window).scrollTop();
					var pageBottom = pageTop + jQuery(window).height();
					var elementTop = jQuery(element).offset().top + (jQuery(window).height()/4);
					var elementBottom = elementTop + jQuery(element).height() - (jQuery(window).height()/4);

					if (fullyInView === true) {
							return ((pageTop < elementTop) && (pageBottom > elementBottom));
					} else {
							return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
					}
			}
	};
	var Utils = new Utils();
	jQuery(function(){
		jQuery(window).scroll(function(){
			faders.some(function(element){
				if(Utils.isElementInView(jQuery(element), false)){
					document.querySelector('body').style.background = '#'+element.getAttribute('data-background');
					return true;
				}
			});
		});
	});
</script>

style.css

body {
    transition: background .8s ease;
}