Changing the color of the navigation bar depending on the background

Question

I need to smoothly change the color of the logo and menu depending on the background color.

It would be best if I could choose the colors myself, e.g. in the second section let the color change to red and in the third to green

I am using locomotive-scroll for horizontal scrolling, I am also sending the code:

        <nav class=" fixed w-full z-50 ">
                <div class=" container mx-auto flex my-7 ">
                    <div class=" w-1/2 "><img src="/logo.svg" alt="logo" /></div>
                    <ul class=" flex w-1/2 gap-7 justify-end items-center text-white font-spacegrotesk ">
                        <li>Work</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </div>
            </nav>
            <div class=" scroll-container relative w-full flex ">
                <div data-scroll-section class=" min-w-full min-h-screen h-screen  bg-[#EDE1D1] ">
                    <h1 class="text-white">section 1</h1>
                </div>
                <div data-scroll-section class=" min-w-full min-h-screen h-screen  bg-[#BD7E36] ">
                    <h1 class="text-green-700">section 2</h1>
                </div>
                <div data-scroll-section class=" min-w-full min-h-screen h-screen  bg-[#6F311A] ">
                    <h1 class="text-black">section 3</h1>
                </div>
            </div>
    
    <script>
            //Horizontal Scroll
            var locoScroll = new LocomotiveScroll({
                el: document.querySelector('.scroll-container'),
                smooth: true,
                direction: 'horizontal',
                class: true,
                multiplier: 1,
                lerp: 0.04,
                scrollbarContainer: false,
                getDirection: true,
                getSpeed: true,
                getDirection: true,
                scrollFromAnywhere: true,
            });
        </script>