Changer le css d'une div fixed selon le scroll

Salut à tous,

Je viens vous présente un petit soucis css/JS pour un site que je réalise. Je dois réaliser un site one page composé de plusieurs sections (chaque section fait au minimum la hauteur de la fenêtre) et je dispose d'un petit bouton de menu en haut à droite permettant d'afficher un menu. Mon soucis est que certaines des sections ont un fond blanc et d'autres un fond foncés.

J'aimerais donc que mon boutton change de couleur dès que je change de section (en scrollant). J'ai donc réalisé (après quelques recherches) ce petit JS :

function isInSection(section)
    {
        var top = $(window).scrollTop();
        var bottom = top + $(window).height();

        var elementTop = $(section).offset().top;
        var elementBottom = elementTop + $(section).height();

        return (bottom >= elementTop && top <= elementBottom);
    }

    if( isInSection($('#section')) ) {
            $('.menu-icon').css('color', '#000000');
        }

        // répété pour chaque section

Il fonctionne mais le soucis c'est que (comme chaque section a un height: 100%) que dès que je scrolle et que je rentre dans une autre section, l'icône change de couleur de suite sans même avoir eu le temps de parcourir la précédente section.

Je suis donc à la recherche d'une solution me permettant de résoudre ce petit contretemps.

Je vous remercie par avance :)