Смена палитры по скроллу

<style> 
.uc-menu-dark, .uc-menu-light {
position: fixed;
z-index: 999;
width: 100%;
transition: opacity 0.5s;
}
.uc-menu-dark {
opacity: 1;
pointer-events: all;
}
.uc-menu-light {
opacity: 0;
pointer-events: none;
}
.uc-menu-dark.in-view {
opacity: 0 !important;
pointer-events: none !important;
}
.uc-menu-light.in-view {
opacity: 1;
pointer-events: all !important;
}
</style> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.uc-dark').forEach(function(trigger_header) {
gsap.timeline({
scrollTrigger: {
trigger: trigger_header, 
start: "-50 top",
end: "bottom top",
scrub: 0.5,
markers: true,
onEnter: function() {
$('.uc-menu-dark').addClass('in-view');
$('.uc-menu-light').addClass('in-view');
},
onLeave: function() {
$('.uc-menu-dark').removeClass('in-view');
$('.uc-menu-light').removeClass('in-view');
},
onEnterBack: function() {
$('.uc-menu-dark').addClass('in-view');
$('.uc-menu-light').addClass('in-view');
},
onLeaveBack: function() {
$('.uc-menu-dark').removeClass('in-view');
$('.uc-menu-light').removeClass('in-view');
},
},
});
});
</script>