Javascript Problem with changing background colour and Luxy scrolling

Site URL: https://sponge-lychee-awaf.squarespace.com

Password is "1"

I am having problems with Javascript. I don't know how to code in Java script so I was wondering if anyone can help me.

I have a java script code for Luxy scrolling for smoother scrolling like Webflow, and I also have a code that works when scrolling on a page, the background colours fade together. For some reason, they don't like one another. The fading when scrolling no longer works and removes my background. 

Here is my code:

Background change colour when scrolling: 

Header

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div wm-plugin="background-change-all"></div>

Footer

<script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script>

Luxy javascript

Header

<!-- before <body/> tag -->

<!-- Smooth scrolling -->

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#siteWrapper',

       
    });
 }
 </script>


<script>
$(document).ready(function() {
     luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.085,
       
    });
});
</script>