Changer la classe d'un élément fixe en fonction du scroll

Bonjour à tous,

Rapidement, voilà ce que je souhaite faire : sur une page web, j'ai une première section de la hauteur de la fenêtre avec une photo en fond, puis la section suivante a un fond blanc. Une icone (blanche) pour afficher le menu est située dans le coin en haut à gauche de la fenêtre quel que soit le scroll. Je souhaite qu'elle soit blanche lorsqu'elle est sur la photo, et jaune sur le reste de la page.

Je débute en JS/jQuery, et voici ce que j'ai pour le moment :

$(document).ready(function () {

var homeHeight = $('#main').height();
var offset = $('#nav-icon').offset();
if (offset.top > homeHeight) {
$('#nav-icon').addClass('icon-jaune');
} else {
$('#nav-icon').removeClass('icon-jaune');
}
});

Cela fonctionne uniquement lorsque je recharge la page, ce n'est pas dynamique. J'ai eu beau chercher (et je me doute que c'est quelque chose d'assez basique), je n'ai pas trouvé comment faire.

Donc merci d'avance si quelqu'un peut me dépanner !