[Résolu] Changer de couleur de bloc lors d'un scroll ?

Bonjour à tous !

Tout d'abord merci à tout ceux qui aident sur ce forum, vous êtes au top !

Je vous explique très rapidement mon problème ?

J'aimerais que lors d'un scroll, des bloc sous forme de div passe d'une couleur à une autre !

Voici l'exemple d'un site qui fonctionne de cette façon : https://www.zendium.fr/notre-marque/

Au scroll de la souris plusieurs éléments passe de couleur blanche à bleue.

J'aimerais reproduire ceci mais le JS est un peu un mystère pour moi

J'ai donc parcouru le WEB et j'ai trouvé une solution : https://jsfiddle.net/yx7kvduL/23/

Sur ce même forum, voici le topic : https://openclassrooms.com/forum/sujet/changer-de-couleur-une-div-au-scroll

Mais je dois avoir le niveau d'une chèvre aveugle car je n'arrive aaaaaaaabsolument pas à l'appliquer :lol: :lol:

J'imagine que je dois mal placer le code qui doit être en interférence avec le reste !

Voici les différents morceaux de codes que j'ai déjà intégrer en JS :

(function(){
 
    var scrollY = function () {
        var supportPageOffset = window.pageXOffset !== undefined;
        var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
        return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    }
 
    var elements = document.querySelectorAll('[data-sticky]')
    for (var i = 0; i < elements.length; i++) {
        (function(element) {
 
            /* Lorsque l'on scrool
        Si le menu sors de l'écran
        Alors il deviendra fixe
    */
 
    // Variables
    var rect = element.getBoundingClientRect()
    var top = rect.top + scrollY()
    var fake = document.createElement('div')
    fake.style.width = rect.width + "px"
    fake.style.height = rect.height + "px"
 
 
 
    // Fonctions
    var onScroll = function () {
        var hasScrollClass = element.classList.contains('fixed')
        if (scrollY() > top && !hasScrollClass) {
            element.classList.add('fixed')
            element.style.width = rect.width + "px"
            element.parentNode.insertBefore(fake, element)
        }
        else if (scrollY() < top && hasScrollClass) {
            element.classList.remove('fixed')
            element.parentNode.removeChild(fake)
        }
 
    }
 
    var onResize = function () {
        element.style.width = "auto"
        element.classList.remove('fixed')
        fake.style.display = "none"
        rect = element.getBoundingClientRect()
        top = rect.top + scrollY()
        fake.style.width = rect.width + "px"
        fake.style.height = rect.height + "px"
        fake.style.display = "block"
        onScroll()
    }
 
    // Listener, évébements sur toute la fenêtre
    window.addEventListener('scroll', onScroll)
    window.addEventListener('resize', onResize)
 
        })(elements[i])
    }
 
})()

Voici le CSS pour ce bout de code JS :

.fixed
{
    position: fixed;
    top: 35px;
}
 
.menu
{
    border: 1px solid black;
    background-color: red;
    z-index: 1;
}
 
.menuu
{
    border: 1px solid black;
    background-color: pink;
    z-index: 1;
}
 
.menuuu
{
    border: 1px solid black;
    background-color: black;
    z-index: 1;
}
 
.menuuuu
{
    border: 1px solid black;
    background-color: green;
    z-index: 1;
}

Les classes " menu, menuu, menuuu, menuuuu " correspondent simplement à 4 bloc de couleur qui reste fixent lors du scroll ( tutoriel suivi ici : https://www.grafikart.fr/tutoriels/menu-collant-108 )

Et j'aimerais que ces blocs passe d'une couleur à une autre lors du scroll.

Pouvez-vous me donner des pistes ?

Est-ce simplement un mauvais placement de ma part ?

Merci pour vos futures réponses, changez rien, vous êtes au top !

Personne n'a de petites idées ?